一文说清楚腾讯云上传文件

如果你的后端不提供接口去上传到腾讯云,你能怎么办呢?

遇到这样的后端,只能自己实现呗

但是后端却给你提供上传的密钥接口,只能说做事只做一半,就是不给做文件接口

那我们前端只能去腾讯云的官网查看文档 对象存储

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,里面去解构拼接一下这里的全球加速路径,你会发现文件访问速度快到飞起,总的流程就是这样,下期再说说阿里云的文件上传吧

相关推荐
Ocean☾几秒前
前端基础-html-注册界面
前端·算法·html
Dragon Wu2 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym7 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫8 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫12 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat13 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。2 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死3 小时前
导航栏及下拉菜单的实现
前端·css·css3