微信小程序同时上传多个文件（wx.uploadFile）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序同时上传多个文件（wx.uploadFile）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用递归

使用递归有一个问题，如果要上传的东西里，其余参数中有些值只能上传一次，比如日期，在第二次上传的时候会显示此日期已经添加，请勿重复添加，这样就会导致只上传成功第一个文件。

//在network.js中封装
export function docxRequest(url,filePaths,i,length,givename,formData) {
  console.log("我被调用了")
  requestTimes++
  wx.showLoading({
      title: '加载中...',
      mask: true
  });
  return new Promise((resolve, reject) => {
            wx.uploadFile({
              url: baseURL + url, //仅为示例，非真实的接口地址(要上传的地址)
              filePath: filePaths[i],
              name: givename,
              formData: formData,
              header: {'Authorization': "Bearer "+wx.getStorageSync("token"),
                       'content-type': 'multipart/form-data',
                      },
              success: (res) => {
                  console.log("res",res)
                  resolve(res.data)
              },
              fail: (error) => {//客户端网络异常
                  reject(error)
                  wx.showToast({
                      title: '网络异常',
                      duration: 2000,
                      icon: 'none'
                  })
              },
              complete:()=>{
                  i++
                  console.log(i,length)
                  if(i == length){
                      console.log("递归结束")
                      requestTimes--
                      if(requestTimes === 0){
                          wx.hideLoading();
                      }
                  }else{
                    // 递归调用
                    console.log("递归调用")
                    requestTimes--
                    docxRequest(url,filePaths,i,length,givename,formData).then(resolve).catch(reject)
                  }
              }
            })
  })

}

//在要使用的页面调用
//docUrl内存的是要上传的文件的地址的数组，0代表从数组的第一个值开始上传，params为除了文件地址的其余参数
 docxRequest(url, docxUrl,0,docxUrl.length,
        "interview_file", params).then((res) => {
         console.log("------res", res)
         var resObj = JSON.parse(res);
         console.log(resObj)
         if (resObj.code == 0) {
         showToast('提交成功')
         this.getPage()
         } else {
           showToast(resObj.msg)
         }
       })

小程序中导入Multipart.min.js

Multipart.min.js提取链接：
链接：提取Multipart.min.js
提取码：xxqd文章来源地址https://www.toymoban.com/news/detail-776645.html

//示例
  var files = [{
  name:'key',
  filePath:img1
  },{
  name:'key',
  filePath:img2
  }]  
   
  var fields = [{
  name:'userId',
  value:1
  },{
  name:'userName',
  value:'zhangsan'
  },{
  name:'time',
  value:'2023-07-29'
  }]
  
 new Multipart({
      files,
      fields
    }).submit(url,{header: {
          'Authorization': "Bearer " + wx.getStorageSync("token"),
          'content-type': 'multipart/form-data',
        }
      }
    ).then((res) => {
    //请求成功
      console.log(res)
      console.log(res.data.code)
      if (res.data.code == 0) {
        showToast('提交成功')
      } else {
        showToast(res.data.msg)
      }
    }).catch((e) => {
       wx.showToast({
        icon:'none',
        title: '提交失败'
      })
    })

//自己项目使用的代码片段
    var docxUrl = this.data.docxPaths
    console.log('docxUrl', docxUrl)

    let fields = Object.keys(params).map(key => ({
      name: key,
      value: params[key]
    }))   //将[{username:"zhangsan",age:15}]这样的形式转化为[{username:"zhangsan"},{age:15}]
    console.log("其余参数", fields)
    let files = docxUrl
    console.log("附件地址", files)
    //上传附件
    files.map((item, index) => {
      return Object.assign(item, { name: 'interview_file', filePath: item.filePath })
    })    //将[{filePath:"http://...."},{filePath:"http://..."}]这样的形式转化为[{name:'interview_file',filePath:"http://...."},{name:'interview_file',filePath:"http://..."}]，其中name值为wx.uploadFile中的key值
    //上传图片
    var uploadImage
    if (this.data.compressImage.length == 1) {
      uploadImage = this.data.compressImage.map(tempPath => ({
        filePath: tempPath
      }))  //将['http://....','hettp://...']这样的数组形式转化为数组里是对象的形式[{filePath:'http://...'},{filePath:'http://...'}]
      uploadImage.map((item, index) => {
        return Object.assign(item, { name: 'interview_photo', filePath: item.filePath })
      })
      files = files.concat(uploadImage)
    }

    console.log("图片和附件", files)
    new Multipart({
      files,
      fields
    }).submit(url,
      {
        header: {
          'Authorization': "Bearer " + wx.getStorageSync("token"),
          'content-type': 'multipart/form-data',
        }
      }
    ).then((res) => {
      console.log(res)
      console.log(res.data.code)
      if (res.data.code == 0) {
        wx.hideLoading()
        showToast('提交成功')
        this.getPage()
      } else {
        showToast(res.data.msg)
      }
    }).catch((e) => {

    })