uniapp 多文件上传

最新推荐文章于 2024-05-31 17:16:28 发布

桑子.

最新推荐文章于 2024-05-31 17:16:28 发布

阅读量688

点赞数 3

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_61891798/article/details/136074696

版权

文章介绍了在uniapp中，如何通过循环和Promise.all方法处理用户选择的多个图片上传，确保所有图片上传成功后再执行后续操作。

摘要由CSDN通过智能技术生成

uniapp中上传多个图片只能通过循环的方式将图片的地址上传，如果想在图片全部上传成功后执行操作，推荐使用Promise.all

  // 上传图片
      onUploadImg: function() {
        uni.chooseMedia({
          count: 6 - this.imgList.length,
          mediaType: ['image'],
          success: ({
            tempFiles
          }) => {
			  //imgList中存储的是图片的本地地址
            this.imgList.push(...tempFiles.map(x => x.tempFilePath))
          }
        })
      },

Promise.all(this.imgList.map(path=>{
			return new Promise((resolve,reject)=>{
				uni.uploadFile({
					url:'http://xxxxxxx/upload/image',
					filePath:path,
					name:'file',
					header: {'content-type': 'multipart/form-data'},
					success: (res) => {
						console.log(JSON.parse(res.data).data,'filepath');
						if(JSON.parse(res.data).code == 200){
							this.images.push(JSON.parse(res.data).data)
						}
						resolve(res)
					},
					fail: (error) => {
					         // 上传失败处理逻辑
					        reject(error);
					    }
				})
			})
		})).then((results)=>{
            //成功的回调
}))