评论

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

微信小程序通过wx.uploadFile接口,将文件上传到七牛云,后端通过调用七牛云SDK获取上传凭证

客户端

  1. 使用wx.chooseImagewx.chooseVideowx.chooseMediawx.chooseMessageFile选择文件,获取到tempFiles,然后请求服务端获取上传密钥
submitForm() {
  const that = this;
  wx.request({
    url: 'https://{your_domain}/file/upload',
    success(res) {
      that.uploadFile(res.data.uploadToken);
    }
  })
}
  1. 使用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
  };
}
最后一次编辑于  2024-05-26  
点赞 0
收藏
评论

1 个评论

  • 后生
    后生
    2024-12-27

    返回hash 和key后 怎么生成可访问的web地址啊

    2024-12-27
    赞同
    回复 2
    • 邬金盼 衡尊科技
      邬金盼 衡尊科技
      01-10
      便捷用法:1、把你的七牛空间访问模式设置为公开访问。
                       2、上传成功后,保存图片地址为:加速域名+你的空间文件路径
                       3、调用时直接加载该图片地址即可


      安全用法:1、把你的七牛空间访问模式设置为私有访问。
                       2、上传成功后,保存图片地址为“空间文件路径”
                       3、读取时,用七牛接口,通过鉴权,用“空间文件路径”换取图片网络路径(换取的路径有失效周期),再进行加载。

      安全用法虽然安全但是读取速度可能会受一些影响,所以如果是遍历路径,可能会稍稍影响用户体验
      01-10
      回复
    • 后生
      后生
      01-13回复邬金盼 衡尊科技
      现在有个问题 我手机上预览和体验版都正常,手机上扫码也正常,打开真机调试或者苹果手机七牛云上传图片就上传失败,错误信息如下图,请问这个怎么解决?
      01-13
      回复
登录 后发表内容