小程序上传图片至七牛云(支持多张上传、预览、删除图片)

以下为wxml

<view class=\'clearFloat\'>
    <view class=\'upload_title\'>头像展示（必填）
      <span class="basic_title_desc">（选一张好看的个人照片可以增加客户点击的机会哦）
      </span>
    </view>
    <view class=\'healthCertImg\'>
      <view class=\'imgrelative\' wx:if="{{headIconArr}}" wx:for="{{headIconArr}}" wx:for-index="index" wx:for-item="item" wx:key="*this">
        <image class="image uploadimg" src="{{imgPath+item.key}}" mode="aspectFit" id="{{imgPath+item.key}}" catchtap=\'previewHeadIcon\'>{{item}}</image>
        <van-icon name="clear" custom-style="color:#979797;position:absolute;right:-20rpx;top:-20rpx;" id="{{index}}" bind:click="deleteHeadIcon" />
      </view>
      <image src=\'../../imgs/upload.png\' class=\'uploadimg upload_jkz\' catchtap=\'headIcon\' wx:if="{{IsHeadIcon}}"></image>
    </view>
  </view>

以下为js

const util = require(\'../../utils/util.js\');
const qiniuUploader = require("../../utils/qiniuUploader");
   
// 头像展示上传图片
  headIcon() {
    var that = this
    that.chooesImage(that, 1, function(res) {
      that.data.headIconArr.push(res)
      // console.log(that.data.ysCertImgArr.length)
      if (that.data.headIconArr.length >= 1) {
        that.setData({
          IsHeadIcon: false
        });
      }
      that.setData({
        headIconArr: that.data.headIconArr
      });
    })
  },
 // 头像展示预览与删除
  previewHeadIcon(e) {
    this._previewImage(e, this.data.headIconArr)
  },
  deleteHeadIcon(e) {
    var that = this
    that._deleteImage(e, that.data.headIconArr, function(files) {
      that.setData({
        headIconArr: files,
        IsHeadIcon: true
      });
    })
  },

 /*图片上传*/
  chooesImage(that, count, callback) {
    util.didPressChooesImage(that, count, function(filePath) {
      qiniuUploader.upload(filePath, (res) => {
          console.log(res)
          callback(res)
          that.checkSubmit()
        }, (error) => {
          console.error(\'error: \' + JSON.stringify(error));
        },
        null, // 可以使用上述参数，或者使用 null 作为参数占位符
        (progress) => {
          // console.log(\'上传进度\', progress.progress)
          // console.log(\'已经上传的数据长度\', progress.totalBytesSent)
          // console.log(\'预期需要上传的数据总长度\', progress.totalBytesExpectedToSend)
        }, cancelTask => that.setData({
          cancelTask
        })
      );
    })
  },
/*图片预览*/
  _previewImage: function(e, arr) {
    var preUlrs = [];
    console.log(arr)
    const imgPath = \'https://cdn.wutongdaojia.com/\'
    arr.map(
      function(value, index) {
        var key = imgPath + value.key
        preUlrs.push(key);
      }
    );
    wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: preUlrs // 需要预览的图片http链接列表
    })
  },
  /*图片删除*/
  _deleteImage: function(e, arr, callback) {
    var that = this;
    var files = arr;
    var index = e.currentTarget.dataset.index; //获取当前长按图片下标
    console.log(index)
    wx.showModal({
      title: \'提示\',
      content: \'确定要删除此图片吗？\',
      success: function(res) {
        if (res.confirm) {
          files.splice(index, 1);
          console.log(files)
        } else if (res.cancel) {
          return false;
        }
        // files,
        that.setData({
          isCanAddFile: true
        });
        that.checkSubmit()
        callback(files)
      }
    })
  },

 

以下为封装的七牛云上传图片方法（util.js）

const qiniuUploader = require("./qiniuUploader");
import api from \'./api.js\';

const getUploadToken = () => {
  var params = {
    token: wx.getStorageSync(\'token\')
  }
  api.ajax("GET", params, "/weixin/getUploadToken").then(res => {
    console.log(res.data)
    initQiniu(res.data)
  });
}
// 初始化七牛相关参数
const initQiniu = (uptoken) => {
  var options = {
    region: \'NCN\', // 华北区
    // uptokenURL: \'https://[yourserver.com]/api/uptoken\',
    // cdn.wutongdaojia.com
    // uptokenURL: \'http://upload-z1.qiniup.com\',
    // uptokenURL: \'https://yuesao.wutongdaojia.com/weixin/getUploadToken\',
    // uptoken: \'xxx\',
    uptoken: uptoken,
    // domain: \'http://[yourBucketId].bkt.clouddn.com\',
    domain: \'image.bkt.clouddn.com\',  // image为七牛云后台创建的空间
    shouldUseQiniuFileName: false
  };
  qiniuUploader.init(options);
}

export function didPressChooesImage(that, count, callback) {
  getUploadToken();
  // 微信 API 选文件
  wx.chooseImage({
    count: count,
    success: function(res) {
      console.log(res)
      var filePath = res.tempFilePaths[0];
      console.log(filePath)
      callback(filePath)
      // 交给七牛上传
    }
  })
}

/**
 * 文件上传
 * 服务器端上传：http(s)://up.qiniup.com
 * 客户端上传： http(s)://upload.qiniup.com
 * cdn.wutongdaojia.com
 */
function uploader(file, callback) {
  initQiniu();
  qiniuUploader.upload(filePath, (res) => {
      // 每个文件上传成功后,处理相关的事情
      // 其中 info 是文件上传成功后，服务端返回的json，形式如
      // {
      //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
      //    "key": "gogopher.jpg"
      //  }
      // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
      that.setData({
        \'imageURL\': res.imageURL,
      });
    }, (error) => {
      console.log(\'error: \' + error);
    },
    // , {
    //     region: \'NCN\', // 华北区
    //     uptokenURL: \'https://[yourserver.com]/api/uptoken\',
    //     domain: \'http://[yourBucketId].bkt.clouddn.com\',
    //     shouldUseQiniuFileName: false
    //     key: \'testKeyNameLSAKDKASJDHKAS\'
    //     uptokenURL: \'myServer.com/api/uptoken\'
    // }
    null, // 可以使用上述参数，或者使用 null 作为参数占位符
    (res) => {
      console.log(\'上传进度\', res.progress)
      console.log(\'已经上传的数据长度\', res.totalBytesSent)
      console.log(\'预期需要上传的数据总长度\', res.totalBytesExpectedToSend)
    });
};
module.exports = {
  initQiniu: initQiniu,
  getUploadToken: getUploadToken,
  didPressChooesImage: didPressChooesImage
}

封装ajax（api.js）

const ajax = (Type, params, url) => {
  var methonType = "application/json";
  // var https = "http://www.wutongdaojia.com"
  var https = "https://yuesao.wutongdaojia.com"
  var st = new Date().getTime()
  if (Type == "POST") {
    methonType = "application/x-www-form-urlencoded"
  }
  return new Promise(function (resolve, reject) {
    wx.request({
      url: https + url,
      method: Type,
      data: params,
      header: {
        \'content-type\': methonType,
        \'Muses-Timestamp\': st,
        \'version\': \'v1.0\' // 版本号
        // \'Muses-Signature\': sign
      },
      success: function (res) {
        // if (res.statusCode != 200) {
        //   reject({ error: \'服务器忙，请稍后重试\', code: 500 });
        //   return;
        // }
        // resolve(res.data);
        wx.hideLoading()
        console.log(res)
        if (res.data.status == 200) {
          resolve(res.data);
        } else if (res.data.status == 400) {
          wx.showToast({
            title: res.data.message,
            icon: \'none\',
            duration: 1000
          })
          return
        } else if (res.data.status == 401){
          wx.removeStorageSync(\'phone\')
          wx.removeStorageSync(\'token\')
          wx.showToast({
            title: res.data.message,
            icon: \'none\',
            duration: 1000,
            success:function(){
              wx.navigateTo({
                url: \'../login/index\',
              })
            }
          })
          return
        } else {
          //错误信息处理
          wx.showToast({
            title: \'服务器错误，请联系客服\',
            icon: \'none\',
            duration: 1000
          })
        }
      },
      fail: function (res) {
        // fail调用接口失败
        reject({ error: \'网络错误\', code: 0 });
      },
      complete: function (res) {
        // complete
      }
    })
  })
}