如果你的后端不提供接口去上传到腾讯云,你能怎么办呢?
遇到这样的后端,只能自己实现呗
但是后端却给你提供上传的密钥接口,只能说做事只做一半,就是不给做文件接口
那我们前端只能去腾讯云的官网查看文档 对象存储
1.安装对应的sdk
当然你也可以到对应的github去下载dist下的压缩文件放到cdn上面,不建议使用官方的cdn,因为不知道哪一天就换链接或者下架了,不要问什么,因为被坑过一次,之前运行得好好地,突然有一天链接失效了,建议本地开发调试可以先用官方的cdn,生产环境还是要老老实实上传公司的cdn
arduino
npm i cos-js-sdk-v5
腾讯云官方文档的文件上传文档,一开始看起来还是有点懵的
2.调用后端密钥接口,import.meta.env.VITE_BUCKET_NAME(存储桶name), import.meta.env.VITE_REGION(所在地域)
kotlin
const cos = new COS({
getAuthorization: async function (options, callback) {
const { data } = await getKey(import.meta.env.VITE_BUCKET_NAME, import.meta.env.VITE_REGION);
callback({
TmpSecretId: data.credentials.tmpSecretId,
TmpSecretKey: data.credentials.tmpSecretKey,
SecurityToken: data.credentials.sessionToken,
StartTime: data.startTime, // 时间戳,单位秒,如:1580000000,建议返回服务器时间作为签名的开始时间,避免用户浏览器本地时间偏差过大导致签名错误
ExpiredTime: data.expiredTime, // 时间戳,单位秒,如:1580000000
ScopeLimit: true // 细粒度控制权限需要设为 true,会限制密钥只在相同请求时重复使用
});
}
});
然后拿到后端返回的数据之后进行文件上传
arduino
const res = await cos.putObject({
Bucket: import.meta.env.VITE_BUCKET_NAME /* 填入您自己的存储桶,必须字段 */,
Region: import.meta.env
.VITE_REGION /* 存储桶所在地域,例如ap-beijing,必须字段 */,
// 存放的文件夹/随机的名字.文件后缀
Key: key /* 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必须字段 */,
StorageClass: 'STANDARD',
Body: file // 上传文件对象
});
到这里是不是以为文件上传成功了,然而并没有,控制台给你报了个跨域,直接懵了
其实解决方法也很简单,就是在腾讯云上去配置对应的跨域,填上你的ip,默认先*,根据你们公司的规定去配置即可
注意,如果你访问文件比较慢,也是可以设置全球加速,没错,就是传说中的cdn,我们来到控制台配置全球加速(这个也是要收费的,根据自己的需求酌情开启)
在上传成功之后有一个res,里面去解构拼接一下这里的全球加速路径,你会发现文件访问速度快到飞起,总的流程就是这样,下期再说说阿里云的文件上传吧