【自用笔记】小程序中使用七牛云上传图片

因为我们之前使用的上传图片在上传比较大的图片时回显耗时很长，所以要求改用七牛云，根据领导给的参考和自己查的资料，做出来一个比较简单的可以满足需求。

首先需要进行准备工作：

内容参考这里（领导给的参考，因为部分准备工作已经做过了，所以我这里就直接从我自己做过的开始）↓

https://zhuanlan.zhihu.com/p/159399992

1.实名认证后，和后端配合，给你一个接口去调用获取到七牛token （这个token可以存储在app.globalData里，方便后面使用）

在这里你要选择自己的上传的地区，一共有五个，详情请自己在github上面去看，还是比较详细的，另外有一个domain的配置，是回显的时候用的，是自己公司的配置好的（开始我以为是配置我选择的那个区域的地址，后来找了很久，然后试了公司的链接后发现的，如果你在参考这篇笔记，还是需要自己试一下的）

2.接口可以调通后，去github上下载sdk文件包

软件开发工具包 - 七牛开发者中心这是参考里面给的链接，但是你可以直接从github上拉

gitHub链接：https://github.com/gpake/qiniu-wxapp-sdk#usage

git clone https://github.com/gpake/qiniu-wxapp-sdk.git

3.打开sdk包，把qiniuUploader.js导入你需要的小程序中，我放在了utils文件夹里，

4.剩下的就好说啦，这里封装了公共方法，借鉴的是：记录小程序使用七牛云上传图片详细步骤及遇到的坑 小程序七牛云上传文件代码封装_七牛云 小程序-优快云博客

目前这个场景是：点击按钮调用wx.chooseMedia，仅支持单张，没有做任何处理（大小压缩等）：

//upload.js

const { getToken } = require("../api/getQiniuToken.js")    // 获取七牛云token接口
const qiniuUploader = require("./qiniuUploader.js"); // 引入七牛云js

const app = getApp(); // 获取应用实例


  /**
   * 初始化七牛相关参数
   * @param {*} res 拿到的七牛云token
   * @param {*} region 上传区域  ECN, SCN, NCN, NA, ASG，分别对应七牛的：华东，华南，华北，北美，新加坡 5 个区域
   * @param {*} uptoken 七牛云token
   * @param {*} domain  bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接。
   * @param {*} shouldUseQiniuFileName  qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
   * 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
   * 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key
   */
  const initQiniu = (res) => {
    var options = {
      region: 'ECN', // 华东  
      uptoken: res,
      // uptokenURL: 'https://[yourserver.com]/api/uptoken',
      // uptoken: '',
      domain: '此处为自己公司配置的网址', 
      shouldUseQiniuFileName: false
    };
    qiniuUploader.init(options);
  }

/**
 * 获取token, getToken是自己封装的接口请求方法，然后使用promise异步返回结果
 */
const getUploadToken = () => {
  return new Promise((resolve,reject)=>{
    getToken().then(res =>{
      if(res.data.message) {
        app.globalData.uploadParams = res.data.message;//此处放在app globalData里是为了避免重复获取token，本次使用期间可以无需重复获取
        initQiniu(res.data.message)  //如果在uploadImg中配置，则不需要init
        resolve(res.data.message)
       }
    })
  })
}


/**
 * 上传七牛
 * @param {*} params 主要存储了上传到七牛云的区域及上面接口获取到的upToken值
 * @param {*} files 图片文件
 */
const uploadImg = (params,files) => {
  var state = 0;    // 上传第几张图片
  var imgList = []; // 保存图片数组
  // let fileList = files.map(item => item.url);  //若files是有url键的对象，则可map进去，但目前只考虑wx自带单张选择图片的情况
  let fileList = [];
  fileList.push(files)
  var uploadArr = fileList;        // chooseMedia上传成功的数组
  var uploadNum = fileList.length; // 上传数组的长度
  return new Promise((resolve, reject)=> {
      for (let i = 0; i < uploadNum; i++) {
          var random = Math.floor(Math.random() * 10000); //随机数
          qiniuUploader.upload(uploadArr[i], (res) => {
              // 以下注释内容是针对多张上传的图片做出处理，返回的是图片地址的数组
              // state++;
              // imgList.push(res.imageURL);
              // if (state == uploadNum) {
              //     resolve(imgList);
              // }
              resolve(res)
          }, (error) => {
              reject('error');
              console.log('error: ' + error);
              wx.hideLoading();
          }, 
          // 以下为option中的自行配置参数，由于在init时就已经配置，所以这里注释掉，但可选择不init，在这里配置参数，
          // {
          //     uploadURL: params.uploadURL, //上传到七牛的那个存储区域所对应的前缀地址，详见SDK中的区域图(如："https://up.qiniup.com")。
          //     domain: 'qiniu.pudu.live',//CDN加速域名，无需修改 || 按照自己需求，配置的下载地址
          //     uptoken: params.uploadToken, //服务端接口获取的七牛token值，我们这边后台返回的字段名为uploadToken，需要换成你们的自定义字段哦
          //     region: 'ECN',//上传区域，共有五个，按需选择
          //     key: null, // 图片自定义名称  避免名称重复此处设置为null可以解决上传undefined file exists问题
          // }
          )
      }
  }) 
}
module.exports = {
  getUploadToken,
  uploadImg
}

//所需组件 .wxml
<text  bindtap="getQiNiuToken">选择图片</text>
<image src="{{imageObject.fileURL}}" mode="aspectFit"></image>



// 所需组件的 .js
import { uploadImg,getUploadToken } from "../../utils/upload"

data:{
    imageObject: {}, // 图片上传（从相册）返回对象。上传完成后，此属性被赋值
}

//上传图片
handleUpload(params,file,type){
  uploadImg(params,file).then((imgObj)=>{
    console.debug("上传成功 files",imgObj);
    this.setData({
      imageObject: imgObj
    })
  }).catch((error)=>{
    console.log("图片上传失败",error);
  })
},

  //选择图片 检查是否有七牛token
  getQiNiuToken() {
    let _this = this;
     // 置空messageFileObject，否则在第二次上传过程中，wxml界面会存留上次上传的信息
     _this.setData({
      imageObject: {},
      imageProgress: {}
  });
    wx.chooseMedia({
      count: 1, // 目前仅支持单张上传
      mediaType: ['image','video'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      camera: 'back',
      success(res) {
        let filePath = res.tempFiles[0].tempFilePath;  //图片地址
        let uploadParams = app.globalData.uploadParams; //判断是否已经请求过上传token
        if(uploadParams) {
            _this.handleUpload(uploadParams,filePath)
        } else {
          getUploadToken().then((res)=>{  //globalData没有上传所需参数，先获取token再上传图片
            _this.handleUpload(res,filePath);
          })
        }
      }
    })
  },

这样就可以实现一个最简单的上传、回显，中间遇到很多不懂的也是边查边试出来的，很多逻辑都不懂，但是功能实现了，各位大佬有更好的可以留言指正。