微信小程序多图上传/朋友圈传图效果【附完整源码】

效果图

---

部分源代码

---

js文件：

var uploadPicture = require('../Frameworks/common.js')
//获取应用实例
const app = getApp()
data:{
    // 上传的案例图片集合
    uploadImages: [],
    // 设置上传案例图片的最大数目
    maxImages: 9,
    // 案例图片数目是否达到了最大数目
    isMaxImagesNum: false,
},

// 选择图片
chooseImageTap: function() {
  let _this = this;
  wx.showActionSheet({
    itemList: ['从相册中选择', '拍照'],
    itemColor: "#f7982a",
    success: function(res) {
      if (!res.cancel) {
        if (res.tapIndex == 0) {
          _this.chooseWxImage('album')
        } else if (res.tapIndex == 1) {
          _this.chooseWxImage('camera')
        }
      }
    }
  })
},

// 选图
chooseWxImage: function(type) {
  let _this = this;
  var picsItems;
  wx.chooseImage({
    // 相关属性设置
    count: _this.data.maxImages,
    sizeType: ['original', 'compressed'],
    sourceType: [type],
    success: function(res) {
      var imgsrc = res.tempFilePaths;
      // concat数组连接，且不会改变现有数组
      var picss = _this.data.uploadImages.concat(imgsrc);
      var imagesArr = '';
      if (picss.length >= _this.data.maxImages) {
        _this.setData({
          isMaxImagesNum: true
        });
      }
      // 判断选择的数量是否超过设定数量
      let num = picss.length <= _this.data.maxImages ? picss.length : _this.data.maxImages;
      for (var i = 0; i < num; i++) {
        imagesArr += '{"imgurl":"' + picss[i] + '"},';
      }
      imagesArr = JSON.parse('[' + imagesArr.substring(0, imagesArr.length - 1) + ']');
      _this.setData({
        uploadImages: picss,
        picsItems: imagesArr
      });
    }
  })
},

// 预览所选图片
selImagePre: function(e) {
  let _this = this;
  wx.previewImage({
    urls: this.data.uploadImages,
    current: e.currentTarget.dataset.src
  })
},

// 图片上传
submitAction: function() {
  // 上传所选图片
  uploadPicture.uploadimg({
    // 传图同时携带的参数
    url: app.globalData.baseUrl + 'freePeopleDemoImgs.php',
    path: _this.data.uploadImages,
    name: 'caseImages',
    date: Date.now(),
  })
},

common.js

function uploadimg(data) {
  console.log(data.date)
  var that = this,
    i = data.i ? data.i : 0,
    success = data.success ? data.success : 0,
    fail = data.fail ? data.fail : 0;

  wx.uploadFile({
    url: data.url,
    filePath: data.path[i],
    name: data.name,
    formData: {
      // 同时上传userId和当前时间
      userId: app.globalData.userId,
      date: data.date,
    },
    success: (resp) => {
      success++;
      app.globalData.xqimgList += resp.data + ",";
    },
    fail: (res) => {
      fail++;
      console.log('fail:' + i + "fail:" + fail);
    },
    complete: () => {
      i++;
      if (i == data.path.length) { // 图片传完时停止调用          

      } else { // 图片还没有传完继续调用函数
        data.i = i;
        data.success = success;
        data.fail = fail;
        that.uploadimg(data);
      }
    }
  });
}

module.exports = {
  uploadimg: uploadimg,
}

源码：https://download.csdn.net/download/yimjune/10757386

原文：https://blog.csdn.net/feng2qing/article/details/81276860