小顺序上传图片到七牛云（支撑多张上传，预览，删除）

2024年2月25日 323次阅读来源: yubin

以下为wxml (运用的vant小顺序ui框架，需在json文件里自行引入)

<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>

以下为wxss

.clearFloat {
  clear: both;
  overflow: hidden;
}
.upload_title {
  color: #222;
  font-size: 32rpx;
  margin-bottom: 16rpx;
  display: block;
  margin-top: 50rpx;
}
.imgrelative {
  position: relative;
  height: 164rpx;
  width: 164rpx;
  margin-right: 43rpx;
  float: left;
}
.uploadimg {
  height: 164rpx;
  width: 164rpx;
  float: left;
}

以下为json

{
  "usingComponents": {
    "van-popup": "../../vant/popup/index",
    "van-area": "../../vant/area/index",
    "van-icon": "../../vant/icon/index",
    "van-toast": "../../vant/toast/index",
    "van-datetime-picker": "../../vant/datetime-picker/index",
    "van-field": "../../vant/field/index",
    "upload": "../../component/upload/index"
  }
}

以下为js文件（涉及到封装的微信ajax和七牛云上传图片要领在下面）

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: 'space.bkt.clouddn.com',  // space为七牛云背景建立的空间
    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
}

封装小顺序wx.request（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
      }
    })
  })
}

有什么不懂的能够加我微信（18310911617）
备注（申明来意）

    原文作者：yubin
    原文地址: https://segmentfault.com/a/1190000018340864
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。