核心思想是通过模拟点击事件和promise.all实现判断多图和单图上传

HTML 部分

门店图
选择上传文件 0">
暂无图片
相册
选择上传文件 0">
暂无图片
  

JS部分

   //上传图片handleChange(e) {this.type = e;//判断是否走多图上传this.$refs.fileRef.dispatchEvent(new MouseEvent('click'));//模拟点击事件},fileChange(e) {try {let files = e.target.files || e.dataTransfer.files;//获取input上传信息this.upLoader(files);//调用上传图片方法} catch (error) {this.$message({message: '上传失败',type: 'error'});}},async upLoader(file) {let subFunc = null;//判断走单图保存方法还是多图保存方法let options = null;//保存方法的参数let arr = [];for (let i = 0; i < file.length; i++) {const formData = new FormData();formData.append('file', file[i]);let data = formData;arr.push(imgUpload(data));//往数组中上传接口完成后的pushpremi对象,imgUpload是上传的方法}Promise.all(arr).then(async (data) => {let file = data.map((e) => {return {businessId: this.id,fileName: e.data.fileName,fileUrl: e.data.completeFilePath};});//file是上传接口返回的信息,是保存是需要携带的参数if (!this.type) {subFunc = photoMasterImg;options = file[0];} else {subFunc = photoAlbum;options = file;}//通过type确定需要保存的参数let { data: res1 } = await subFunc(options);if (res1.code == '200') this.getPhotoAll();});}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！