美文网首页微信小程序
微信小程序上传多张图片

微信小程序上传多张图片

作者: 是狮子呀_ | 来源:发表于2019-09-25 10:24 被阅读0次
微信小程序上传图片

![MLVG%3VP0YOH%W(2B5Z4.png

//选择照片
var tempFiles = [];
    var _this = this;
    var n = 9;
    if (9 > _this.data.temps.length > 0) {
      n = 9 - _this.data.temps.length;
    } else if (_this.data.temps.length == 9) {
      n = 0;
    }
wx.chooseImage({
      count: n, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 original:原图  compressed:缩略图
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function(res) {
        console.log(res)
        var temps = res.tempFilePaths;
         _this.data.isFile ? tempFiles = temps : tempFiles = _this.data.tempFilePaths.concat(temps)
         _this.setData({
          tempFilePaths: tempFiles,
          isFile: false,
          temps: tempFiles
        })
      }
    })
//确认上传照片
confirm:function(){
      var that=this;
      var length = that.data.temps.length;
      that.uploadImg(that.data.temps, 0, length)
  }
//上传照片
 uploadImg: function(filePaths,index, length) {
    var that = this;
    var image = 'image' + index;
    console.log('filePaths[' + index + '] = ' + filePaths[index] + '----------------------')
    wx.uploadFile({
      url: 'https://www.xxx.com',
      filePath: filePaths[index],
      name: image,
      formData: {
        index: index
      },
      header: {
        'Accept': "*/*",
      },
      success: function(res) {
        console.log(res)
        console.log(index)
        index++;
        if (index == length) {
          console.log('已上传完成!' + that.data.temps.length)
          var str = ""
          for (var i = 0; i < that.data.temps.length; i++) {
            str += "&image" + i + "=" + that.data.temps[i]
          }
          wx.showToast({
            title: '上传成功',
          })
        } else {
          that.uploadImg(filePaths, index, length);
        }
        that.setData({
          disabled: false
        })
      }
    })
  },

index.wxml

<block wx:for="{{temps}}" wx:key="index">
  <image src="{{item}}" ></image>
</block>

相关文章

网友评论

    本文标题:微信小程序上传多张图片

    本文链接:https://www.haomeiwen.com/subject/vsdbuctx.html