node+vue实现文件服务端上传直传七牛云服务器

背景：利用七牛云提供的SDK实现上传文件到七牛云，前端需要上传凭证，而上传凭证需要后端给到，下面是node调用七牛云sdk生成上传凭证(要用到qiniusdk，安装cnpm i qiniu --save)

//七牛云配置文件
const qiniu = require('qiniu')

// 创建上传凭证（accessKey 和 secretKey在七牛云个人中心中有，lytton是七牛云刚才创建的空间名称）
const accessKey = 'xxxxx-AiE6m44AlAFxK72' //你自己七牛的密钥
const secretKey = 'xxxxxx-1_VqgRTljRUrduWA' //你自己七牛的密钥
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
const options = {
  scope: 'aoaoe', //这是你创建存储空间的名字
  // deadline: 1695523678 //这是七牛云生成token的有效期，单位时秒，不设置默认是3600S，一串数字是时间戳
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)

module.exports = {
  uploadToken  //导出的是七牛云生成的token，很重要
}

然后写一个接口供前端调用

//前端获取到七牛云返回的token
router.get('/getQniuToken', (req, res) => {
    console.log('输出下七牛云的token', uploadToken);
    res.json({
        code: 200,
        data: uploadToken.uploadToken,
        messages: '获取成功'
    })
})

下面是前端调用接口上传图片

• 安装七牛云sdk cnpm i qiniu-js --save
• 引入sdk import * as qiniu from 'qiniu-js'
• 引入获取上传凭证的接口 import { getQniuToken } from '@/api/user'
• 写一个上传方法

upLoadFun() {
      let config = { useCdnDomain: true, region: qiniu.region.z0 }
      let putExtra = { fname: file, params: {}, mimeType: null }
      //开始上传  token 需要找后端获取(单独的方法)
      getQniuToken().then(res => {
        let upToken = res.data.uploadToken
        let baseUrl = res.data.buckethostname
        let headers = qiniu.getHeadersForMkFile(upToken)
        //file 是获取到的文件对象
        //key 是文件名字，传null将使用hash值来当作文件名
        let observable = qiniu.upload(file, key, upToken, headers, putExtra, config)
        this.subscription = observable.subscribe(observe)
      })
      let observe = {
        next(res) {
          // console.log('已上传大小，单位为字节：' + res.total.loaded)
          // console.log('本次上传的总量控制信息，单位为字节：' + res.total.size)
          // console.log('当前上传进度，范围：0～100：' + res.total.percent);
          console.log(res)
        },
        error(err) {
          // console.log(err.code)
          // console.log(err.message)
          // console.log(err.isRequestError)
          // console.log(err.reqId)
          console.log(err)
        },
        /*完成后的操作*/
        complete(res) {
          //上传成功以后会返回key 和 hash  key就是文件名了！
          console.log(res)
          // let fileUrl =baseUrl + '/' + res.key
        }
      }
    }