微信小程序上传多图到七牛

记一次微信小程序上传多图到七牛的步骤和全部代码：

要做成的效果是这样的：

 以图文的形式反馈，图片不超过九张。

微信小程序上传图片到七牛步骤：

1.第一次请求获得七牛token ：?s=App.Upload.QiniuToken

请求获得token和host.

2.用wx.chooseImage点击上传图片

3.wx.uploadFile 上传到七牛云：   http://upload-z2.qiniup.com

先贴wxml代码：

<view class="fklr">
  <textarea class="inp" placeholder="输入反馈的内容" placeholder-class="inpt" value="{{feedbackInfo}}" bindblur="contentInput" maxlength="500"></textarea>
</view>
< 分割线
<view class="fgx"></view>
<!-- 分割线 -->
<view class="tjtp">添加图片</view>

<view class="dt">
  <view wx:if="{{tp}}" wx:for="{{tp}}" wx:key="index">
    <image class="more" bindlongpress="shanchu" data-id="{{index}}" src="{{item}}"></image>
  </view>
  <view wx:if="{{tp.length==0}}">
    <image class="more" src="../../images/moren.png"></image>
  </view>

  <image class="sc" src="../../images/shangc.png" bindtap="sc"></image>
</view>
<view class="fgx1"></view>

<view class="qr" bindtap="confirmFeedback">确认反馈</view>

 js代码：不是按照我上面说的顺序写的，有些函数封装和调用。

//点击加号上传触发的事件：
 sc: function (e) {
    var that = this
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log(res.tempFilePaths)
        let tempFilePaths = app.fileName(res.tempFilePaths[0].substring(res.tempFilePaths[
          0].lastIndexOf('.') + 1));
        let tempFilePaths2 = res.tempFilePaths[0];
        app.request({
          url: "?s=App.Upload.QiniuToken",
          method: "post"
        }).then(res => {
          console.log(res);
          let uptoken = res.data.data.token;
          let host = res.data.data.host;
          console.log(uptoken);
          that.uploadQiniu(tempFilePaths, tempFilePaths2, uptoken);
        })
        let old_data = that.data.tp
        let new_data = res.tempFilePaths
        if (that.data.tp.length + res.tempFilePaths.length <= 9) {
          that.setData({
            tp: old_data.concat(new_data)
          })
          console.log(that.data.tp)
        } else {
          wx.showToast({
            title: '图片不超过9张',
            icon:"none",
            duration: 1000,
          })
        }
      }
    })
  },
//上传图片到七牛的函数
   uploadQiniu(tempFilePaths, tempFilePaths2, uptoken) {
    console.log(tempFilePaths, tempFilePaths2);
    var that = this;
    let fankuiImg=that.data.fankuiImg;
    wx.uploadFile({
      url: 'http://upload-z2.qiniup.com',
      name: 'file',
      filePath: tempFilePaths2,
      formData: {
        key: tempFilePaths,
        token: uptoken,
      },
      success: function (res) {
        let data = JSON.parse(res.data)
        console.log(data);
        let picKey = data.key
        console.log(that.data.host);
        let qunImg = that.data.host + picKey;
        fankuiImg = fankuiImg.concat(qunImg);
        console.log(fankuiImg)
        that.setData({
          qunImg:qunImg,
          fankuiImg:fankuiImg
        })
      },
      fail: function (res) {
        console.log(res)
      }
    });
  },
//长按删除
shanchu: function (e) {
    console.log(e)
    var that = this
    var tp = that.data.tp
    var index = e.currentTarget.dataset.id
    wx.showModal({
      title: '提示',
      content: '确定要删除此图片吗？',
      success: function (res) {
        if (res.confirm) {
          console.log('点击确定了');
          tp.splice(index, 1);
        } else if (res.cancel) {
          console.log('点击取消了');
          return false;
        }
        that.setData({
          tp
        });
      }
    })
  },
//反馈文字内容
 contentInput(e){
    let value = e.detail.value;
    console.log(value);
    this.setData({
      feedbackInfo:e.detail.value
    })
  },
//确认反馈
confirmFeedback(e){
    if(this.data.feedbackInfo==""||this.data.feedbackInfo==null){
      wx.showToast({
        title: '请输入反馈内容',
        icon:"none"
      })
    }else{
      app.request({
        url:"?s=App.User.Feedback",
        method:"post",
        data:{
          text:this.data.feedbackInfo,
          imgs:this.data.fankuiImg
        }
      }).then(res=>{
        console.log(res);
        if(res.data.data=="成功"){
          wx.showToast({
            title: '反馈成功！',
            icon:"success"
          })
        }
      })
    }
  },