微信小程序直传文件到七牛云

客户端

1. 使用wx.chooseImage、wx.chooseVideo、wx.chooseMedia或wx.chooseMessageFile选择文件，获取到tempFiles，然后请求服务端获取上传密钥

submitForm() {
  const that = this;
  wx.request({
    url: 'https://{your_domain}/file/upload',
    success(res) {
      that.uploadFile(res.data.uploadToken);
    }
  })
}

2. 使用wx.uploadFile上传，通过回调实现上传进度及状态提示

uploadFile(token) {
  // 文件直传
  const uploadTask = wx.uploadFile({
    url: 'https://up-z2.qiniup.com',  // 视空间地域而定
    filePath: this.data.fileList[0].url,
    name: 'file',
    formData: {
      token, // 上传密钥
    },
    success(res) {
      const data = res.data;
      console.log(data);  // 返回文件哈希(hash)和云端文件名(key)
    }，
    fail(err) {
      // 上传失败处理
    }
  })
  // 上传进度回调
  uploadTask.onProgressUpdate((res) => {
    if(res.progress < 100){
      // 进度不足100时显示进度
      wx.showLoading({
        title: `上传中 ${res.progress}%`,
      });
    } else if (res.progress == 100){
      // 进度达到100时显示结果
      wx.showToast({
        title: '完成',
        icon: 'success'
      });
    }
  })
}

服务端

调用七牛云SDK获取上传密钥

// 以下依赖需先 npm install 安装好
const qiniu = require('qiniu');
const uuid = require("uuid");

// 去七牛控制台获取访问密钥
const accessKey = 'AK';
const secretKey = 'SK';
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);

// 获取上传密钥的方法
getUploadToken() {
  // 用户上传的文件名五花八门，格式不统一不易管理，存进去还可能乱码，可使用uuid随机生成一个文件名，使服务端文件名格式统一
  const id = uuid.v4() // 可自定义文件名
  const options = {
    scope: 'Bucket',  // 空间名称
    // 以下均为选填
    forceSaveKey: true,  // 强制更名，不使用原来的文件名，如需沿用原文件名，可以去掉此项
    saveKey: `${id}$(ext)`,  // 自定义文件名，其中$(ext)为拓展名
    fsizeLimit: 10485760,  // 限制文件大小，单位为Byte，以1024计，此处为10M
    mimeLimit: 'image/*'  // 限制文件格式，此处为只能上传图片
  };
  const putPolicy = new qiniu.rs.PutPolicy(options);  // 配置前面的存储策略
  const uploadToken = putPolicy.uploadToken(mac);  // 生成上传密钥
  // 返回给客户端的数据，其中关键参数是uploadToken
  return {
    errcode: 0,
    errmsg: 'ok',
    uploadToken
  };
}