小程序wx.chooseImage上传图片，支持相册选择图片或使用相机拍照

序言：微信小程序上传图片wx.chooseImage的使用方法，支持本地相册选择图片或使用相机拍照，可一次性上传多张图片，本文介绍如何使用wx.chooseImage上传多图。

文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

实例

wxml

<view class="release-list release-imglist">
      <view style="width:100%;" class="list-tit">商品多图<text>*</text></view>
      <view style="font-size:26rpx;color:#db000f;margin-top:-20rpx;margin-bottom:6rpx;">注：第一张图作为封面图，建议尺寸800px*800px</view>
      <view class="list-img flex row-wrap">
        <!-- 根据已选择的图片临时路径数组展示图片-->
        <view class="img" wx:for="{{uploaderList}}" wx:key="{{index}}">
          <!-- 图片-->
          <image src="{{item}}" bindtap='showImg' data-index="{{index}}"></image>
          <!-- 删除-->
          <image class="img-close" src="../../images/icon-close.png" bindtap='clearImg' data-index="{{index}}"></image>
        </view>
        <!-- 上传按钮+框 -->
        <view class="img" ><image bindtap='upload' src="../../images/img-add.png"></image></view>
      </view>
    </view>

js

data:{
	uploaderList: [],           //保存上传图片url的数组
}
//上传图片
  upload: function (e) {
    var that = this;
    //选择图片
    wx.chooseImage({
      count: 9, // 默认6
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        for(var i=0;i<res['tempFilePaths'].length;i++){
          var imgurl = res.tempFilePaths[i];
          var imageArr = that.data.uploaderList;
          wx.showLoading({
            title:'上传中',
          })
          wx.uploadFile({
            url: HTTP_REQUEST_URL+'/api/public/upload', //仅为示例，非真实的接口地址
            filePath: imgurl,
            name: 'file',
            formData: {
              type:'image'
            },
            success (res){
              console.log(data);
              wx.hideLoading();
              var data = JSON.parse(res.data);
              if(data['status']==200){
                imageArr.push(data['data']['video_url']);
                that.setData({
                  uploaderList:imageArr
                })
              }else{
                wx.showToast({
                  title: data['msg'],
                  icon:'none'
                })
              }
            }
          })
        }
      }
    })
  },
    //展示图片
  showImg: function (e) {
    var that = this;
    wx.previewImage({
      urls: that.data.uploaderList,
      current: that.data.uploaderList[e.currentTarget.dataset.index]
    })
  },
  // 删除图片
  clearImg: function (e) {
    var that = this
    var nowList = [];//新数据
    var uploaderList = that.data.uploaderList;//原数据
    
    for (let i = 0; i < uploaderList.length; i++) {
      if (i == e.currentTarget.dataset.index) {
        // var arr = that.data.joinString.split(',')
        // arr.splice(i, 1);                              //删除图片的同时删除掉其对应的ID
        // var newArr = arr.join(',')
        // that.setData({
        //   joinString:newArr,
        //   id:newArr+','
        // })
      } else {
        nowList.push(uploaderList[i])
      }
    }
    that.setData({
      //uploaderNum: this.data.uploaderNum - 1,
      uploaderList: nowList,
      //showUpload: true,
    })
  },

效果图

我是小程序软件开发，每天分享开发过程中遇到的知识点，如果对你有帮助的话，帮忙点个赞再走呗，非常感谢。

往期文章分享：

php一款可以在服务器安装的在线api文档编写工具：showdoc

1分钟搭建FTP服务端，有了这款软件竟然可以如此简单