背景：利用七牛云提供的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
}
}
}
