博主正在重构博客中，刚开始时静态资源都是上传到本地服务器的，但这个项目博主最后打算真正上线运营的。索性就改进了下，把静态资源尽量放到云存储中，方便后续开发。这里把方法和遇到坑给记录下。
1.使用前提注册七牛云并创建存储空间
在秘钥管理中拿到 AccessKey/SecretKey
2.工作原理
上传文件到七牛有客户端上传和服务器上传两种方式，这里我们选择客户端上传，上传前从后端获取token，再通过客服端直接上传。获得上传成功后的key值，拼接上路径前缀，即是文件的资源路径，再将资源路径存入到数据库中。
3.后端接口搭建npm install qiniuimport Router from 'koa-router'
import axios from './utils/axios'
import qiniu from 'qiniu'
//需要填写你的 Access Key 和 Secret Key
const accessKey = '你的 Access Key'
const secretKey = '你的 Secret Key'
//要上传的空间
const bucket = '要上传的空间'
//声明路由
let router = new Router({ prefix: '/qiniu' })
//登录接口
router.post('/upload', async (ctx, next) => {
//上传到七牛后保存的文件名
let key = ctx.request.body.key
//生成上传 Token
// console.log(key, bucket)
let mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
let putPolicy = new qiniu.rs.PutPolicy({ scope: bucket })
// 生成上传文件的 token
let uptoken = putPolicy.uploadToken(mac)
if (uptoken) {
ctx.body = {
code: 0,
msg: '获取上传token成功',
uptoken
}
} else {
ctx.body = {
code: -1,
msg: '获取token失败'
}
}
})
export default router
更多功能可参考官方SDK文档
4.前端页面搭建
上传文件组件，根据存储区域不同设置action(具体可通过产品手册查看)，请求携带参数通过data绑定
class="avatar-uploader"
id="imguplad"
action="https://upload.qiniup.com"
:data="qn"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
//七牛图片上传
qn: {
token: '',
key: ''
}
上传前先进行文件检查//上传封面前检查
async beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isGIF = file.type === 'image/gif'
const isPNG = file.type === 'image/png'
const isBMP = file.type === 'image/bmp'
if (!isJPG && !isGIF && !isPNG && !isBMP) {
this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
return false
}
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
//根据文件名生成上传唯一key值
let key =
'blog/image/' +
this.utils.formatDate(new Date().getTime(), 'YY/MM/DD/hh:mm:ss/') +
file.name
console.log(key)
await this.getuploadToken(key)
return (isJPG || isGIF || isPNG || isBMP) && isLt2M
}
同时获取token，根据日期时间设置唯一key值//获取七牛上传token
getuploadToken: async function(key) {
const { status, data } = await this.$axios.post('/qiniu/upload', {
key
})
// console.log(status, data)
if (status == 200 && data.uptoken) {
this.qn.token = data.uptoken
this.qn.key = key
// console.log(this.qn)
}
}
上传成功后将返回的key值拼接为真正的url资源路径，并设置到addpost.post_bg上，让img标签正常显示图片//返回上传的图片地址
handleAvatarSuccess(res, file) {
this.addpost.post_bg = 'https://gravatar.catbk.cn/' + res.key
}
效果大概这样
文章列表
