微信小程序上传图片和文件

---

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

---

今天讲解一下微信小程序上传图片或者上传文件的步骤：

首先第一步我们要先在wxml页面文件中写入一个图标或者按钮，用来触发微信调起手机相册和拍照功能，供你选择图片

<image src="/static/images/addimg.png" bindtap="chooseImage"></image>

然后给这个图标或者按钮写上点击事件chooseImage（事件名称随意定义）

然后还需要写一个盒子，用来存放选择好的文件缩略图，缩略图上写上删除按钮，供删除，并且要实现点击缩略图展示大图的功能，下面是我写的整体内容

<view class="imgbox">
   <!-- 存放上传的图片的盒子 -->
   <block wx:for="{{images}}" wx:key="this">
      <view class="add">
         <!-- 图片缩略图  -->
         <image src="{{item}}" mode="aspectFill" data-idx="{{index}}" bindtap="handleImagePreview"></image>
         <!-- 移除图片的按钮  -->
         <view class="delete" data-idx="{{index}}" bindtap="removeImage">删除</view>
      </view>
   </block>
   <image src="/static/images/addimg.png" bindtap="chooseImage"></image>
</view>

images: 是用来存放选择图片的数组，js定义

handleImagePreview：查看大图的点击事件

removeImage：删除已选择的图片的点击事件

下面是样式文件，可自由调整

.imgbox{
  width: 100%;
  min-height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.imgbox image{
  width: 70rpx;
  height: 70rpx;
}
.add{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
}
.delete{
  font-size: 24rpx;
  color: #E60000;
}

然后是js文件：

Page({
    /**
   * 页面的初始数据
   */
  data: {
    images: [],
  },
  //点击添加按钮选择图片
  chooseImage: function (e) {
    wx.chooseImage({
      sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
      sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
      success: res => {
        const images = this.data.images.concat(res.tempFilePaths)
        this.setData({
          images: images
        })
      }
    })
  },
  // 删除图片
  removeImage(e) {
    const idx = e.target.dataset.idx;
    this.data.images.splice(idx, 1);
    var del_image = this.data.images;
    this.setData({
      images: del_image
    })
  },
  // 查看大图
  handleImagePreview(e) {
    const idx = e.target.dataset.idx
    const images = this.data.images
    wx.previewImage({
      current: images[idx], //当前预览的图片
      urls: images, //所有要预览的图片
    })
  },
})

到此是已经完成了图片选择，删除，预览的功能

最后是上传：

需要注意的是，上传图片的时候只能单张上传，因此当我们选择了多张图片之后，需要分开一张一张的上传，因此需要写一个for循环。

点击上传按钮进行操作：

    var that = this;
    let images = this.data.images
    let img = []
    if (images.length > 0) {
      for (var i = 0; i < images.length; i++) {
        wx.getImageInfo({
          src: images[i],
          success(res) {
            wx.uploadFile({
              url: api.Cg_TousuUpload + '?session_id=' + wx.getStorageSync('session_id'), //上传图片接口地址
              filePath: res.path,
              name: 'wxfiles',
              formData: null,
              timeout: 60000,
              formData: { 
                //这里面可以放一些后端要的其他参数
              },
              success: function (res) {
                if (JSON.parse(res.data).code == 'Y') {
                  //上传成功之后，后端会返回你图片的线上地址，名称和一个id
                  if (images.length == img.length) {
                    //相等说明已经上传完毕
                  }
                }
              },
              fail: function (error) {}
            })
          }
        })
      }
    }

这个是上传图片的步骤，上传附件跟上传图片大致类似，下面是上传附件的步骤

  // 文件上传
  chooseFile() {
    var that = this
    wx.chooseMessageFile({
      count: 1,
      type: 'file',
      success(res) {
        var file = 'voucherData.matterapply_file'
        const tempFilePaths = res.tempFiles
        that.setData({
          files: tempFilePaths
        })
      }
    })
  },
  // 删除文件
  removefile() {
    this.setData({
      files: []
    })
  },

我这里是只允许选择一张附件，如果要选择多个附件，参照图片功能即可，

还有就是wx.chooseMessageFile这个方法只允许选择微信里的文件，如果想上传手机里的文件，需要用微信发一下就能选到了

    var that = this;
    let files = that.data.files
    if (files.length > 0) {
        wx.uploadFile({
          url: api.Cg_TousuUpload + '?session_id=' + wx.getStorageSync('session_id'), //上传附件接口地址
          filePath: res.path,
          name: 'wxfiles',
          formData: null,
          timeout: 60000,
          formData: { 
             //这里面可以放一些后端要的其他参数
          },
          success: function (res) {
            if (JSON.parse(res.data).code == 'Y') {
              //上传成功之后，后端会返回你附件的线上地址，名称和一个id
            }
          },
          fail: function (error) {}
        })
    }

好了，就是这些，有问题咨询，希望能帮助到一些人吧！！！