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

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

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

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

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

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

相关推荐
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder7 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727577 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架