小程序图片上传组件

功能介绍

点击添加图片框，选择并添加图片
点击关闭小图标，删除已选图片
可能过传参控制最多上传几张图片

组件封装介绍

在与pages同级位置新建components文件夹，用于存放项目中常用的组件
在coponents文件夹里边新建uploadPic文件夹，来放置我们的组件内容

uploadPic.wxml文件代码

  <view class="pic-array">
    <view class="item-pic" wx:for="{{files}}" wx:key="index">
      <image src="{{uploadPath}}{{item}}" class="pic"></image>
      <image src="/static/images/close-white.png" class="icon" bindtap="deletePic" data-index="{{index}}"></image>
    </view>
    <view class="item-pic">
    <image src="/static/images/upload.png" class="pic" bindtap="uploadPic"></image>
    </view>
  </view>

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 id = "uploadPic" > < /uploadPic>

json文件

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