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

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

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

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

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

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