时间： 2021.8.30 ，想在项目中，把上传的图片存储到 七牛云 上，但是发现，七牛云他只给了一个限时 30 天的 cdn，就是在30天后，这个就会取消掉，不知道上传后的图片还有没有在 。需要绑定 备案的域名，就应该可以永久使用了吧，不过我没有 备案的域名，但是还是记录一下 。
1. 创建七牛云账号： 创建账号后，需要实名后，才能开通一个 30 天，内存为 10G 的域名！
1、创建一个对象存储 空间： 
文章图片
他会让你起一个空间名称，用来存储你的东西！
文章图片
地区我选择的是 华南的，访问控制选择 公开的。
创建后，会显示在这里，要注意的是，如果没有绑定一个 备案的域名，他到30天，就会过期。东西应该就会没有了的。要注意，应该是这样的。
文章图片
2. 在后台，返回 token 给前端：
1、选择后端技术： 这个是 七牛云 规定的，上传图片时，必须携带 token 来证明用户的信息，我使用的是 node 来做后端。
官网教程： 这个网站是使用，不同的技术的 后端，生成 token 的做法，可以看看 。
文章图片
我选中 node.js 。
他会跳到 github ，让我们现在插件 ：
文章图片
2、下载插件：
serve > npm install qiniu
是在你的后端中下载的。
使用他时，需要几个参数，要到 七牛云 去查找：
右上角头像 ----- 个人中心 ----- 密钥管理 ------ 就可以看到 AK 和 SK 2个值，复制；accessKey：AK；secretKdy： SK；scope： 你创建空间的名字；
import * as qiniu from 'qiniu';
@Controller()
export class AdminController {
constructor(private readonly adminService: AdminService) {}// 组件上传图片的 token，前端必须先获取这个 token
@Get('key')
getkey() {
var accessKey = 'dg87lClBFLrluuIyKP8-oVS5YaYyWqlG2mukaJmo';
var secretKdy = 'D7BkyrvQixBpRGuXOtOgNf3M2msgn2GLrsTwzre_';
var mac = new qiniu.auth.digest.Mac(accessKey, secretKdy);
var options = {
scope: 'mtbx',
};
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken = putPolicy.uploadToken(mac);
return {
token: uploadToken
};
}
}
返回的数据，需要以这种格式返回：
{
token: xxxxx;
}
3. 前端上传图片： 前端是使用 vue3.0 + element-plus 的上传组件，进行上传图片。
1、获取后端的 token：
setup() {
const content = reactive({
token: {},
imageUrl: ''
}) async function getToken(){
const { data } = await axios.get('key');
console.log(data);
//{ token: xxxxx }
content.token = data
}onMounted(() => {
getToken();
})const refContent = toRefs(content);
return {
...refContent
}
}
得到后端的 token；
2、使用上传组件 :
文章图片
参数说明： action：
说明：不同区域的上传地址不同，可以参考官网的路径：官网地址
文章图片
咦，框错了，是 加速上传 的那个地址！！！。
data：
说明：就是我们从后端获取的 token。
然后，在上传组件上传成功后的回调函数中输出 七牛云 返回的图片路径：
然后进行拼接，前面的地址是你 七牛云 的 CND 名。
function handleAvatarSuccess(res) {
console.log(res)
const url = 'http://qyh7d8zuc.hn-bkt.clouddn.com/' + res.key;
console.log(url);
}
在
左上角 --- 对象存储 --- 空间管理 ----- 点击空间名 进到里面就可以看到了：
文章图片
这样，上传图片应该可以完成 。
【vue|vue3.0 + element-plus + 上传图片到七牛云】参考文章：
- EsunR
推荐阅读
- vue|vue网络请求
- Vue|Vue组件详解
- Vue|Vue混入与插件
- Vue|Vue实例生命周期
- vue|适合Vue用户的React教程，你值得拥有
- vue|vue判断设备是移动端还是pc端
- 前端|vue 自适应布局
- avue|Avue中实现多选删除功能
- 奶妈の自学|[の项目练习]Vue-Cli、API的头条新闻项目