uniapp 小程序上传图片

uniapp 小程序上传图片本文使用了u-view框架<u-upload :fileList=”fileList1″ accept=’image’ width=’60’ height=”60″ :capture=’capture’ @afterRead=”afterRead” @delete=”deletePic” name=”1″ multiple :maxCount=”10″></u-upload>data(){ return{ capture:[‘album’,’c

大家好,又见面了,我是你们的朋友全栈君。

本文使用了u-view框架

<u-upload
	:fileList="fileList1"
	accept='image'
	width='60'
	height="60"
	:capture='capture'
	@afterRead="afterRead"
	@delete="deletePic"
	name="1"
	multiple
	:maxCount="10"
></u-upload>
data() {
	return {
		capture:['album', 'camera'],
		fileList1:[],
	}
}
afterRead(file) {
	this.fileList1 = [...this.fileList1,...file.file]
},
deletePic(item){
	this.fileList1.splice(item.index,1)
},

点击保存时上传图片


uploadFilePromise(url) {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: `${config.baseUrl}/你的上传接口`, // config.baseUrl为当前域名
			filePath: url,
			name: 'files[]', //根据自己业务场景调整,不是固定的
			formData: {
				user: 'test'
			},
			success: (res) => {
				resolve(res.data)
			}
		});
	})
},
async save(){
	//异步改成同步,因为保存时要拿到图片地址
	//上传图片,拿到图片地址
	let arr = []
	//因为接口不支持多张同时上传,所有循环调接口拿到图片地址
	for (var i = 0; i < this.fileList1.length; i++) {
		let res = await this.uploadFilePromise(this.fileList1[i].url)
		let resImg = JSON.parse(res)
		arr.push(resImg.data)
	}
	let data = {
		data:{
			content:this.info.content,//描述
			pictures:arr.length==0?'':arr.join(','),
			orderType:3,
			"parentId":0,
			"status":0,
			"state":1
		}
	}
	//保存接口
	addStationWorkOrder(data).then(res=>{
    
    })
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/150136.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 十进制转换为二进制java_二进制转八进制算法

    十进制转换为二进制java_二进制转八进制算法将十进制转换为二进制将二进制转换为十进制1.将十进制转换为二进制:思路:对十进制的数进行除2取余法:/***讲10进制转化为二进制*@paramde:待转换的十进制*@return:转换后的二进制(string)*/publicstaticStringDecimal2Binary(intde){

    2022年10月18日
    2
  • 微信模拟地理位置_伪装微信地理位置

    微信模拟地理位置_伪装微信地理位置1.允许应用程序打开系统窗口,显示其他应用程序2.允许应用程序访问GMail账户列表3.允许应用程序请求从AccountManager验证4.允许应用程序管理AccountManager中的账户列表5.允许应用程序通过账户验证方式访问账户管理ACCOUNT_MANAGER相关信息6.允许应用程序获取网络信息状态7.允许应用程序访问网络连接8.允许应用程序获取模拟定位信息用于开发者调试应用9.允许应…

    2022年6月12日
    61
  • maven配置阿里云镜像仓库「建议收藏」

    maven配置阿里云镜像仓库「建议收藏」1.修改maven根目录下的conf文件夹中的setting.xml文件<mirrors><mirror><id>alimaven</id><name>aliyunmaven</name><url>http://maven.aliyun.com/nexus/content/groups/public/</url><mirrorOf&g.

    2022年6月24日
    59
  • kalman滤波融合原理及其matlab仿真「建议收藏」

    kalman滤波融合原理及其matlab仿真「建议收藏」1、kalman原理卡尔曼滤波是一种递推式滤波方法,不须保存过去的历史信息,新数据结合前一刻已求得的估计值及系统本身的状态方程按一定方式求得新的估计值。1.1、线性卡尔曼假设线性系统状态是k,卡尔曼原理可用以下五个公式表达:X(k|k-1)=AX(k-1|k-1)+BU(k)………..(1)P(k|k-1)=AP(k-1|k-1)A’+Q…………

    2022年5月28日
    48
  • Python开发 之 Python3读写Excel文件(较全)[通俗易懂]

    Python开发 之 Python3读写Excel文件(较全)[通俗易懂]Python读写Excel文件用xlrd包读取Excel文件用xlrd包读取Excel文件用法比较简单。importxlrdimportxlwtimportopenpyxlfromdatetimeimportdate,datetimearrayNum=6#array={‘L1′:”,’L2′:”,’L3′:”,’L4′:”,’Question’:”,…

    2022年10月2日
    2
  • Zxing.jar下载

    Zxing.jar下载版本3.3.3

    2022年7月13日
    18

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号