微信小程序上传图片

wxml:

  <view class="certificatedetails-item color2E width591 padding3050" hidden="{{hide}}">
    <view>拍照上传存证</view>
    <!-- 上传图片预览 -->
    <view class="preview">
      <block wx:for="{{images}}">
        <view class="item-con">
          <image src="{{item}}"></image>
          <text class="delete" data-index="{{index}}" bindtap="delate">x</text>
        </view>
      </block>
      <view class="addImg" bindtap="addImagefunction">+</view>
    </view>
    <view class="imageNum">{{images.length}}/5</view>
  </view>

添加图片

  addImagefunction() {
    var evalList = this.data.images;
    var that = this;
    var imgNumber = evalList;
    if (imgNumber.length >= 5) {
      wx.showModal({
        title: '',
        content: '最多上传五张图片',
        showCancel: false,
      })
    }
    wx.showActionSheet({
      itemList: ["从相册中选择", "拍照"],
      itemColor: "#2e8fce",
      success(res) {
        console.log(res.tapIndex)
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            that.chooseImage("album");
          } else if (res.tapIndex == 1) {
            that.chooseImage("camera");
          }
        }
      },
      fail(res) {
        console.log(res.errMsg)
      }
    })
  },
  //选择图片
  chooseImage: function(type) {
    console.log(type);
    const that = this;
    wx.chooseImage({
      count: 5,
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: res => {
        const selectImg = that.data.images.concat(res.tempFilePaths);
        console.log(util.unique(selectImg))
        let maximages = ""
        if (selectImg.length <= 5) {
          maximages = selectImg
        } else {
          maximages = selectImg.slice(0, 5);
          wx.showToast({
            title: '最多只能上传5张图片',
          })
        }
        maximages.forEach((item) => {
          console.log(item)
        })
        that.setData({
          images: maximages
        })
      },
      fail: function(res) {},
      complete: function(res) {},
    })
  },
    //删除图片
  delate: function(e) {
    console.log(e); 
    const index = e.target.dataset.index;
    const images = this.data.images;
    images.splice(index, 1)
    this.setData({
      images: images
    })
  },

wx.showActionSheet 显示操作菜单

其实不用操作菜单也可以，会默认从sourceType第一个开始。如：

['album', 'camera']

默认是从文件中选择图片

上传图片：

upLoadImg:function(){
    wx.showToast({
        icon: "loading",
        title: "正在上传"
    })
    const that = this;
    that.data.images.map((path) => {
        wx.uploadFile({
            url: "*****",
            header: {
                "Authentication": wx.getStorageSync("header"),
                "Content-Type": "application/form-data"
            },
            filePath: path,
            method: "POST",
            name: 'file',
            success(res) {
            //上传成功后，后端返回图片的地址
                arr.push(JSON.parse(res.data).payload)
                    that.setData({
                        uploadImg: arr,
                        uploadImgSucc: true,
                    })
                }
            });
    })
    
}