uniapp封装上传多张图片

//新建一个utils文件夹，文件夹下新建utils.js文件
/*
	imgPaths 请求图片数组
	index：imgPaths开始上传的序号
 * successFiles:已上传成功的文件
	
*/
function uploadFiles(imgPaths, index, successFiles, callBack) {  
  var that = this;
  uni.showLoading({
    title: '正在上传第' + (index/1+1) + '张',
  })
  uni.uploadFile({
    url: '', //上传图片的接口地址接口地址
    filePath: imgPaths[index].path,
    name: 'file',
    formData:{
      uploadUse:'File'
    },
    header:{
      token: uni.getStorageSync('token')
    },
    success: function(res) {
     //成功,文件返回值存入成功列表
      var data = JSON.parse(res.data);
      successFiles.push(data.data);
    },
    complete: function(e) {
      index++; //下一张
      if (index == imgPaths.length) {
        uni.hideLoading();
        //上传完毕，作一下提示
        uni.showToast({
          title: '上传成功',
          icon: 'success',
          duration: 2000
        });
        if(callBack){
          callBack(successFiles);
        }
      } else {
        //递归调用，上传下一张
        that.uploadFiles(imgPaths, index,successFiles, callBack);
      }
    }
  })
}



export default{
uploadFiles
}

在main.js中引入

在这里插入代码片
import utils from './utils/utils.js'
Vue.prototype.utils= utils

在需要上传的文件里面写

//file就是图片数组
if (file instanceof Array) { //判断是否是数组
	const index = 0
	var successFiles = []  //接收的参数
	this.utils.uploadFiles(file, index, successFiles, (data) => {
		//data就是上传图片返回来的数据
	})
}