小程序图片上传组件

功能介绍

1. 点击添加图片框， 选择并添加图片

2. 点击关闭小图标， 删除已选图片

3. 可能过传参控制最多上传几张图片

组件封装介绍

1. 在与pages同级位置新建components文件夹， 用于存放项目中常用的组件

2. 在coponents文件夹里边新建uploadPic文件夹， 来放置我们的组件内容

uploadPic.wxml文件代码

uploadPic.wxss文件代码

.pic - array {
  display: flex;
  flex - wrap: wrap;
}

.item - pic {
  position: relative;
  margin: 0 10 rpx 10 rpx 0;
}

.item - pic.pic {
  width: 160 rpx;
  height: 160 rpx;
  display: block;
}

.item - pic.icon {
  position: absolute;
  right: 10 rpx;
  top: 10 rpx;
  width: 28 rpx;
  height: 28 rpx;
}

uploadPic.json文件代码

{
  "component": true //设置该页面为组件，一定要加上这句代码，注意json文件中不能写注释
}

uploadPic.js文件代码

var common = require('../../utils/common.js');
var util = require('../../utils/util.js');
  Component({
  properties: {
    files: {
      type: Array,
      value: []
    },
    maxFileCount: { //允许最多9张图片
      type: Number,
      value: 9
    },
    isCanAddFile: {
      type: Boolean,
      value: true
    }
 },

  data: {
    uploadPath: util.uploadPath
  },

  methods: {
  // 图片上传
    uploadPic() {
      var that = this;
      wx.chooseImage({
        count: that.data.maxFileCount - that.data.files.length, //最多可以选择的图片张数
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success(res) {
          var waitFiles = res.tempFilePaths;
          var allowCount = that.data.maxFileCount - that.data.files.length; //允许上传的文件数
          if (waitFiles.length >= allowCount) {
            waitFiles = waitFiles.slice(0, allowCount);
          }
          var index = 0; //第几张开始
          var successFiles = []; //成功的文件
          common.uploadFiles(waitFiles, index, successFiles, function (urls) { //此处为抽出的公用方法，便于其它地方调用
          console.log(urls);
          that.data.files = that.data.files.concat(urls);
          if (that.data.files.length >= that.data.maxFileCount) {
            that.data.isCanAddFile = false;
          }
          that.setData({
            files: that.data.files,
            isCanAddFile: that.data.isCanAddFile
          });
        })
      }
    },
  // 图片删除
  deletePic(e) {
    var that = this;
    var files = that.data.files;
    var index = e.currentTarget.dataset.index; //获取当前长按图片下标
    wx.showModal({
      title: '提示',
      content: '确定要删除此图片吗？',
      success: function (res) {
        if (res.confirm) {
          files.splice(index, 1);
        } else if (res.cancel) {
          return false;
        }
        that.setData({
          files,
          isCanAddFile: true
        });
      }
    })
  },
  //将文件路径暴露出去
  getFiles: function () {
    return this.data.files;
  }
}
})

common.js中上传图片的公共方法

• 采用递归的方式多文件上传

• imgPaths:需要上传的文件列表

• index：imgPaths开始上传的序号

• successFiles:已上传成功的文件

• callBack：文件上传后的回调函数

function uploadFiles(imgPaths, index, successFiles, callBack) {
var that = this;
wx.showLoading({
  title: '正在上传第' + index + '张',
})
wx.uploadFile({
  url: "文件上传地址",
  filePath: imgPaths[index],
  name: 'anqindayviews',
  header: {
    "Content-Type": "multipart/form-data"
  },
  success: function (res) {
    console.log(res);
    var data = JSON.parse(res.data);
    //成功,文件返回值存入成功列表
    if (data.error === '0') {
      successFiles.push(data.result);
    }
  },
  complete: function (e) {
    index++; //下一张
    if (index == imgPaths.length) {
      wx.hideLoading();
      //上传完毕，作一下提示
      wx.showToast({
        title: '上传成功' + successFiles.length,
        icon: 'success',
        duration: 2000
      });
      if (callBack) {
        callBack(successFiles);
      }
    } else {
      //递归调用，上传下一张
      that.uploadFiles(imgPaths, index, successFiles, callBack);
    }
  }
})
}

组件的引用

wxml文件

 < /uploadPic>

json文件

{
"usingComponents": {
  "uploadPic": "../../components/uploadPic/uploadPic"
}
}