微信小程序—多图片上传

小程序多图片上传，我们封装成一个自定义组件，方便后续开发调用，代码如下：

<view class="weui-uploader upimg">
  <view>
    <view class="weui-uploader__files">
      <block wx:for-items="{{files}}" wx:key="{{index}}">

        <view class="weui-uploader__file" id="{{item}}" style="position:relative">
          <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
          <image wx:if="{{showdel==1?true:false}}" src='{{IMG_URL}}/mod/img/content/isdelete.svg' bindtap="del" data-id="{{index}}" class="todel"></image>
          <!--可以给图片交换位置-->
          <image wx:if="{{showmove==1?true:false}}" src='{{IMG_URL}}/mod/img/content/toright.svg' bindtap="toright" data-id="{{item}}" class="toright"></image>
          <image wx:if="{{showmove==1?true:false}}" src='{{IMG_URL}}/mod/img/content/toleft.svg' bindtap="toleft" data-id="{{item}}" class="toleft"></image>
        </view>
      </block>
    </view>

    <view class="upbox">
      <view class="upimgbox" bindtap="chooseImage">
        <image src="{{IMG_URL}}/mod/yijiu/assets/img/bmwkt/upimg.png"></image>
        <view style="font-size:24rpx;color:#aaa">{{txt}}</view>
      </view>
    </view>
  </view>
</view>

/*uploadpic.js*/
var myBehavior = require('../util/util')
Component({
  behaviors: [myBehavior],
  properties: {
    'title': {
      type: String,
      value: '',
    },
    'txt': {
      type: String,
      value: '点击上传',
    },

    "files": {
      type: Array,
      value: [],
    },
    "maxnum": {
      type: Number,
      value: 4,
    },
    "minnum": {
      type: Number,
      value: 0,
    },
    "showdel": {
      type: Number,
      value: 0,
    },
    "showmove": {
      type: Number,
      value: 0,
    }
  },
  data: {
    "type": '1',
    'maxnum': 4,
    'minnum': 0,
    
    "title": "",
    'txt': '点击上传',
    "IMG_URL": 'http://xxxx',
    'files': [],
  },
  methods: {
    del(e) {
      var that = this;
      var id = e.currentTarget.dataset.id;
      var files = this.data.files;

      this.confirm('删除此图片？', "删除提示", function () {
        files.splice(id, 1)
        that.setData({
          files: files
        })
      });
    },

    toright(e) {
      var that = this;
      var id = e.currentTarget.dataset.id;
      var files = this.data.files;
      var files1 = this.change_array(id, files, 0);
      console.log(files1);
      this.setData({
        files: files1
      });
    },
    toleft(e) {
      var that = this;
      var id = e.currentTarget.dataset.id;
      var files = this.data.files;
      var files1 = this.change_array(id, files, 0, 1);
      console.log(files1);
      this.setData({
        files: files1
      });
    },



    picAdd:function(data){
      let that=this;
      if (typeof data !='object'){
        data=[];
      }
      that.setData({
        files: that.data.files.concat(data)
      });
    },

    chooseImage: function (e) {
      let that = this;
      let maxl = this.data.maxnum;
      let files = that.data.files;
      let title = that.data.title;
      let l = files.length;
      let formid="";
      if (this.id) {
        formid = this.id;
      }
      if (files.length >= maxl) {
        this.alert(title + "最多上传" + maxl + "张照片");
        return false;
      }
      this.actionSheet(['拍照', '手机相册', '素材库'], function (v) {
        if (v == 2 && formid) {
          let _pic_edit_selnum = maxl - l;
          let pages = getCurrentPages();
          pages[pages.length - 1]._pic_edit_sel_a = [];
          pages[pages.length - 1]._pic_edit_selnum = _pic_edit_selnum;

          let isformid = that.id;
          that.reto("/extend/selpic/selpic?itype=uploadpic&formid=" + isformid + "&id=0&op=edit");
          //进入自定义的素材库页面
        } else {
          that.chooseImage1(e, v);
        }
      });
    },

    chooseImage1: function (e,isv) {
      var that = this;
      var maxl = this.data.maxnum;
      var files = that.data.files;
      var title = that.data.title;
      var l = files.length;
      let sourceType = 'camera';
      if (isv == 1) {
        sourceType = 'album';
      }
      if (files.length >= maxl) {
        this.alert(title + "最多上传" + maxl + "张照片");
        return false;
      } else {
        var nextl = maxl - l;
        wx.chooseImage({
          sizeType: ['original', 'compressed'],
          sourceType: [sourceType],
          success: function (res) {
            var addo = [];
            res.tempFilePaths.forEach((item, i) => {
              if (i < nextl) {
                addo.push(item);
              }
            });
            that.setData({
              files: that.data.files.concat(addo)
            });
          }
        })
      }
    },

    upload(fun) {

      var files = this.data.files;
      var minnum = this.data.minnum;
      var title = this.data.title;
      if (files.length < minnum) {
        if (minnum > 1) {
          this.alert(title + "最少上传" + minnum + "张照片");
        } else {
          this.alert(title + "必须上传");
        }

        return false;
      }
      // console.log(files)
      if (files.length>0){
        this.upload_photos(files, fun);
      }else{
        typeof fun == "function" && fun([]);
      }
      
    }
  }
});

在需要的页面使用组件uploadpic（增加，编辑集成封装在一起），然后调用，如下：

<!--files就是编辑时显示已存在的图片传入组件即可-->
<uploadpic id="logopic" txt="上传商品图片" files="{{picurl}}" maxnum="1" minnum="0" title="商品" showdel="1"  ></uploadpic>