微信小程序实现上传多张本地图片到服务器和图片预览

1，前言

---

最近在写小程序，用到了wx.uploadFile方法，发现这方法居然不支持同时上传多个文件，于是自己写了一个上传多个的方法。

[图片上传失败...(image-c4d973-1610865751169)]

2，需求

---

博主做的是用户投诉页面；需求是用户上传最多三张图片，最后把图片和文字和用户信息等一起提交给服务器；

[图片上传失败...(image-8e50b6-1610865751169)]

3，解决思路

---

博主的解决思路是定义一个递归函数，递归调用wx.uploadFile上传，全部完成后结束递归。

4，代码展示

---

this.data里的数据

/**
* 页面的初始数据
*/
data: {
 imgs:[],//上传图片列表
 imgPath:[],//已上传成功的图片路径
},

上传图片代码

// 上传照片
chooseImg (e) {
  const _this = this;
  let imgs = this.data.imgs;
  let imgNumber = this.data.imgs.length;//当前已上传的图片张数
  if(imgNumber >= 3){
    FN.Toast("超出上传个数");
    return false;
  }else{
    imgNumber = 3 - imgNumber;
  };
  wx.chooseImage({//打开本地相册选择图片
    count: imgNumber,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success (res) {
      const tempFilePaths = res.tempFilePaths;
      for(let i = 0;i < tempFilePaths.length; i++){
        imgs.push(tempFilePaths[i]);
      }
      _this.setData({//赋值，回显照片
        imgs: imgs
      });
      let successUp = 0; //成功
      let failUp = 0; //失败
      let count = 0; //第几张
      let length = tempFilePaths.length; //总数
      _this.recursionUploading(tempFilePaths, successUp, failUp, count, length);//调用上传方法
    }
  })
},

递归上传方法

//采用递归的方式上传图片
recursionUploading(imgPaths, successUp, failUp, count, length){
  var _this = this;
  wx.showLoading({
  title: '正在上传第' + count + '张',
  });
  wx.uploadFile({
    url: `${app.globalData.baseURL}/api接口地址`,
    filePath: imgPaths[count],
    formData:{
      userId:app.globalData.userMsg.userId
    },
    name: "uploadImage",
    header: {
      'content-type': 'multipart/form-data'
    }, 
    success (e) {
      console.log(e)
      let path = _this.data.imgPath;
      let obj = e.data;
      if(obj.status === "y"){
        path.push(obj.infoObject);
        _this.setData({
          imgPath:path
        });
      }
      successUp++;//成功+1
    },
    fail (e) {
      failUp++;//失败+1
    },
    complete (e) {
      count++;//下一张
      if(count == length){
        FN.Toast(`上传成功${successUp}`)
      }else{
        //递归调用，上传下一张
        _this.recursionUploading(imgPaths, successUp, failUp, count, length);
      }
    }
  })
},

预览大图

// 预览大图
lookBigImg (e) {
  let index = e.currentTarget.dataset.index;//索引
  let big = this.data.imgs[index];
  wx.previewImage({
    current: big, // 当前显示图片的http链接
    urls: this.data.imgs // 需要预览的图片http链接列表
  })
},

如果看了觉得有帮助的，我是@鹏多多11997110103，欢迎 点赞 关注 评论；
END

往期文章

• 微信小程序API交互的自定义封装
• 简单的JS+CSS实现网页自定义换肤

个人主页

• CSDN
• GitHub
• 博客园
• 掘金