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

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

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

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

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

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

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

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

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

handleImagePreview：查看大图的点击事件

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

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

.imgbox{
  >
  min->
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.imgbox image{
  >
  >
}
.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
        })
      }
    })
  },
  // 删除文件
特别声明：本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有，并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利，请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。