小程序之上传多张图片

 

 

上传组件uploadImg文件夹(有uploadImg.wxml、uploadImg.wxss、uploadImg.js、uploadImg.json)

uploadImg.wxml:

<view class="uploadImg-wrap">
    <view class="imgList-wrap">
        <view class="upload-list-item" wx:for="{{imgList}}" wx:key="index" wx:for-index="index" wx:for-item="item" bindtap="viewImage" data-url="{{item}}">
            <image class="card-img" src="{{item}}"></image>
            <view class="icon-delete" catchtap="delImg" data-index="{{index}}">
                <image class="icon-delete" mode="widthFix" src="../../static/common/icon-delete.png"></image>
            </view>
        </view>
        <view class="add-wrap" bindtap="chooseImg" wx:if="{{imgList.length<maxCount}}">
            <image class="icon-camera" mode="widthFix" src="../../static/common/icon-camera.png"></image>
            <view class="add-title">{{title}}</view>
        </view>
    </view>
</view>

uploadImg.wxss:

.uploadImg-wrap {
  width: 100%;
  padding: 0 10rpx;
  box-sizing: border-box;
}
.uploadImg-wrap .imgList-wrap {
  overflow: hidden;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  justify-items: center;
}
.uploadImg-wrap .imgList-wrap .upload-list-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  margin-top: 30rpx;
}
.uploadImg-wrap .imgList-wrap .upload-list-item .card-img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  pointer-events: auto;
  border-radius: 8rpx;
  border: 1px dashed #979797;
}
.uploadImg-wrap .imgList-wrap .upload-list-item .icon-delete {
  width: 40rpx;
  position: absolute;
  right: -10rpx;
  top: -10rpx;
}
.uploadImg-wrap .add-wrap {
  width: 200rpx;
  height: 200rpx;
  border: 1px dashed #979797;
  border-radius: 8rpx;
  background: #f9fafb;
  text-align: center;
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.uploadImg-wrap .add-wrap .icon-camera {
  width: 80rpx;
  height: 80rpx;
  pointer-events: none;
}
.uploadImg-wrap .add-wrap .add-title {
  color: #333333;
}

uploadImg.js:

import { API_URL } from "../../common/request.js"
Component({
  lifetimes: {
    created: function () { },
    attached: function () {
      this.data.imgList = [];
      var imgD = this.data.imgList;
      imgD = imgD.concat(this.data.pageImgList);
      this.setData({
        imgList: imgD
      });
    },
    // 数据监听
    observers: {
      pageImgList(val) {
        var that = this;
        that.data.imgList = [];
        var imgD = this.data.imgList;
        imgD = imgD.concat(val);
        this.setData({
          imgList: imgD
        });
      }
    }

  },
  /**
   * 组件的属性列表
   */
  properties: {
    pageImgList: {
      type: Array,
      required: true,
      value() {
        return [];
      }
    },
    /* 每次选择X张照片 */
    imgCount: {
      type: Number,
      value: 9,
    },
    /* 最多上传几张照片 */
    maxCount: {
      type: Number,
      value: 9,
    },
    title: {
      type: String,
      value: '上传图片',
    },
    name: {
      type: String,
      value: ''
    },
    // 图片类型
    category: {
      type: String,
      value: ' public'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    imgList: [],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    chooseImg() {
      var that = this;
      wx.chooseImage({
        count: this.data.imgCount, //默认9
        sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          // 上传多张图片
          that.uploadImg(res.tempFilePaths);
        }
      });
    },
    uploadImg(tempFilePaths) {
      // 文件上传的函数，返回一个promise
      wx.showLoading({ title: '上传中...' })
      return new Promise((resolve, reject) => {
        var that = this;
        var tempImgUrls = that.data.imgList;
        for (var i = 0; i < tempFilePaths.length; i++) {
          wx.uploadFile({
            url: API_URL + 接口地址, //需要用HTTPS，同时在微信公众平台后台添加服务器地址
            filePath: tempFilePaths[i], //上传的文件本地地址
            name: 'file',
            header: {
              'content-type': 'multipart/form-data',
              'cookie': wx.getStorageSync('cookie')
            },
            formData: {
              category: this.data.category
            },
            //附近数据，这里为路径
            success: function (res) {
              wx.hideLoading();
              if (res.statusCode == 200) {
                var result = JSON.parse(res.data);
                if (result.status) {
                  var imgUrl = result.data;
                  tempImgUrls.push(imgUrl);
                  that.setData({
                    imgList: tempImgUrls
                  })
                  if (i == tempFilePaths.length) {
                    that.triggerEvent("syncImages", {
                      list: tempImgUrls,
                      name: that.data.name
                    });
                    resolve();
                  }
                } else {
                  reject(result.errMsg);
                }
              } else {
                reject(res);
              }
            },
            fail: function (err) {
              console.log(err);
            }
          });
        }
      });
    },
    delImg(e) {
      var that = this;
      wx.showModal({
        title: '提示',
        content: '确定要删除吗？',
        success: res => {
          if (res.confirm) {
            var imgL = that.data.imgList;
            imgL.splice(e.currentTarget.dataset.index, 1);
            that.setData({
              imgList: imgL
            })
            that.triggerEvent("syncImages", {
              list: imgL,
              name: that.data.name
            });
          }
        }
      })
    },
    viewImage(e) {
      wx.previewImage({
        urls: this.data.imgList,
        current: e.currentTarget.dataset.url
      });
    },
  }
})

 调用该上传组件

1.在父组件的.json文件里先引入该组件

{
  "usingComponents": {
    "upload-img":"../../components/uploadImg/uploadImg"
  }
}

2.在.wxml文件里

<upload-img name="IdCard" pageImgList="{{formInfo.IdCard}}" maxCount="9"  bind:syncImages="editImg"></upload-img>

3.在.js文件里

/**
   * 页面的初始数据
   */
  data: {
    formInfo: {
      IdCard: []
    }
  },

加以下方法函数

editImg(e) {
    var formD = this.data.formInfo;
    formD[e.detail.name] = e.detail.list;
    this.setData({
      formInfo: formD
    })
  },