记录小程序使用七牛云上传图片详细步骤及遇到的坑 小程序七牛云上传文件代码封装

七牛云上传简介

上传文件，支持图片文件、视频文件、PDF(.pdf), Word(.doc/.docx), Excel(.xls/.xlsx), PowerPoint(.ppt/.pptx)等文件格式。
文件在线查看，支持的文件格式：支持的文件格式：pdf, doc, docx, xls, xlsx, ppt, pptx。

注意事项(一定要看，包括代码备注里也有很多需要修改的字段都加了注意二字)

1、您需要了解您的七牛存储空间设置在那个区域，比如华东，华南等；可在七牛云官网查看；

2、后端服务应提供一个 URL 地址，供小程序请求该地址后获得 uptoken。

3、根据你创建的七牛存储空间，把对应的 https 上传地址添加到小程序的访问白名单中，

登录 微信公众平台，前往 设置 - 开发设置，点击 服务器配置 下的「修改」链接。
修改 uploadFile 域名(比如华东 https 上传地址为：https://up.qiniup.com，地址不清楚写什么请参见下方图片)
如果需要下载文件，则还需要一同设置 downloadFile 域名，注意一定要是https开头的
保存即可

操作过程详解

1、从 github 上下载qiniuUploader.js，导入小程序项目。

//执行命令
git clone https://github.com/gpake/qiniu-wxapp-sdk.git

2、从上一步下载后的项目中utils文件里找到qiniuUploader.js 文件并复制到自己的小程序项目中，在此我也放在的自己的utils文件夹里；

3、自己写的公用方法，单独建了一个上传公用JS（文件名为upload.js），详细代码如下

const qiniuUploader = require("./qiniuUploader");//注意路径地址，此处我是将上传封装的JS和qiniuUploader放在的同一文件下
import {doRequest,apiUri} from "./http";//自己封装的请求方法，需要换成换成你自己的
// 获取应用实例
const app = getApp();

//第一步从后端接口获取token，doRequest是自己封装的接口请求方法，然后使用promise异步返回结果
const getUploadToken = () => {
    return new Promise((resolve,reject)=>{
      doRequest("请求upToken的接口地址",{},'1.0',"GET",(res)=>{
      	  app.globalData.uploadParams = res.data;//此处放在app globalData里是为了避免重复获取token，本次使用期间可以无需重复获取
          resolve(res.data)    
      }) 
    })
}
//params中主要存储了上传到七牛云的区域及上面接口获取到的upToken值
const uploadImg = (params,files) => {
  var state = 0;    // 上传第几张图片
  var imgList = []; // 保存图片数组
  let fileList = files.map(item => item.url);
  var uploadArr = fileList;  // chooseImage上传成功的数组
  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);
              }
          }, (error) => {
              reject('error');
              console.log('error: ' + error);
              wx.hideLoading();
          }, {
              uploadURL: params.uploadURL, //上传到七牛的那个存储区域所对应的前缀地址，详见上图。
              domain: 'qiniu.pudu.live',//CDN加速域名，无需修改
              uptoken: params.uploadToken, //服务端接口获取的七牛token值，我们这边后台返回的字段名为uploadToken，需要换成你们的自定义字段哦
              region: 'ECN',//上传区域，核实后填写，具体看上图
              key: null, // 图片自定义名称  避免名称重复此处设置为null可以解决上传undefined file exists问题
          })
      }
  }) 
}
module.exports = {
  getUploadToken,
  uploadImg
}

4、页面内使用

//页面内wxml 此处我引用了vant小程序框架，如果你选择其他需要自行修改一下，
<van-uploader multiple max-count="5" bind:after-read="uploadAfterRead" preview-size="144rpx" accept="image" file-list="{{ fileListBefore }}" />
//页面内js
import { uploadImg,getUploadToken } from "../../../utils/upload";//注意改成你自己的文件地址哦，由于上方自行封装的上传方法文件名为upload.js,此处如果你自己的通用方法文件名跟我不一致，记得更换！！！

//Page里面
 data: {
	fileListBefore: [],//上传图片列表
 }
  /** 上传图片之前判断  */ 
  uploadAfterRead(event){
    const { type } = event.currentTarget.dataset;
    const { file } = event.detail;
    let uploadParams = app.globalData.uploadParams; //判断是否已经请求过上传token，如果globalData里有数据则不再重复请求
    if(!!uploadParams){
      this.handleUpload(uploadParams,file,type); //globalData里有上传token及其他所需参数
    }else{
      getUploadToken().then((res)=>{  //globalData没有上传所需参数，第一步先获取再上传
        this.handleUpload(res,file,type);
      })
    }
  },
  //上传图片
  handleUpload(params,file,type){
    uploadImg(params,file).then((imgList)=>{
      console.debug("上传成功 files",imgList);    
      let imgUrl = app.globalData.uploadParams.website;//后台返回的不带前缀地址，此处通过循环全部加上，如无需要请忽略
      let newList = imgList.map(item => {     
        if(!!item.split("qiniu.pudu.live/")[1]){
          return {
            url: imgUrl+item.split("qiniu.pudu.live/")[1],
            name: item.split("qiniu.pudu.live/")[1]
          }
        }           
      }) 
      this.setData({fileListBefore: [...this.data.fileListBefore,...newList]}) 
    }).catch((error)=>{
      console.log("图片上传失败",error);
    })
  },

以上是上传完整代码如果有任何问题，欢迎随时互相学习。