uniapp 小程序上传图片

本文使用了u-view框架


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=>{
    
    })
}

你可能感兴趣的:(小程序,uniapp,小程序,前端,vue.js)