vue使用腾讯云COS上传文件-很清楚的哈。

最近一个项目需要用到前端COS上传文件，网上找了很多教程都是不清不楚的，搞懂了写个文章记录。

内容有点长，一点一点看

VUE使用的是js的上传SDK，先给vue安装一下。

npm i cos-js-sdk-v5 --save

前端第一步的活儿干完了，然后就是后端，因为考虑安全问题，所以我使用了临时密钥上传。

我的后端是Thinkphp6，所以采用了php的临时密钥生成的代码。

• composer 安装临时生成密钥

1.  
   如果根目录有composer.json文件则将创建"qcloud_sts/qcloud-sts-sdk": "3.0.*"加入require里面
2.  
   否则创建composer.json的文件，内容如下：
3.  
   {
4.  
   "require":{
5.  
   "qcloud_sts/qcloud-sts-sdk": "3.0.*"
6.  
   }
7.  
   }
8.  
    
9.  
   添加好了后命令提示符到后端根目录下执行 composer update

 安装好了后新建一个文件，或者控制器，弄好了，试一试访问有没有问题哈，没问题的话响应是这样的

{"code":10001,"status":"success","data":{"expiredTime":1651332681,"expiration":"2022-04-30T15:31:21Z","credentials":{"sessionToken":"xxxxxxxxxxxxxxxxxxx","tmpSecretKey":"xxxxxxxxxxx="},"requestId":"xxxxxxxxxx","startTime":xxxxxxx}}

{"code":10001,"status":"success","data":{ 这一节是我自己加上去的

下面是控制器的代码

1.  
   <?php
2.  
    
3.  
   declare(strict_types=1);
4.  
    
5.  
   namespace app\controller;
6.  
    
7.  
   use QCloud\COSSTS\Sts;
8.  
    
9.  
   class Cos
10.  
    {
11.  
    /**
12.  
    * 获取临时密钥，计算签名
13.  
    *
14.  
    * @return \think\Response
15.  
    */
16.  
    public function index()
17.  
    {
18.  
    $sts = new Sts();
19.  
    $config = array(
20.  
    'url' => 'https://sts.tencentcloudapi.com/', // url和domain保持一致
21.  
    'domain' => 'sts.tencentcloudapi.com', // 域名，非必须，默认为 sts.tencentcloudapi.com
22.  
    'proxy' => '',
23.  
    'secretId' => "XXXXXXXXXXXXXXXXXX", // 固定密钥,若为明文密钥，请直接以'xxx'形式填入，不要填写到getenv()函数中
24.  
    'secretKey' => "XXXXXXXXXXXXXXXXXX", // 固定密钥,若为明文密钥，请直接以'xxx'形式填入，不要填写到getenv()函数中
25.  
    'bucket' => "储存桶名称", // 换成你的 bucket
26.  
    'region' => "储存桶地区", // 换成 bucket 所在园区
27.  
    'durationSeconds' => 1800, // 密钥有效期
28.  
    'allowPrefix' => '*', // 这里改成允许的路径前缀，可以根据自己网站的用户登录态判断允许上传的具体路径，例子： a.jpg 或者 a/* 或者 * (使用通配符*存在重大安全风险, 请谨慎评估使用)
29.  
    // 密钥的权限列表。简单上传和分片需要以下的权限，其他权限列表请看 https://cloud.tencent.com/document/product/436/31923
30.  
    'allowActions' => array(
31.  
    // 简单上传
32.  
    'name/cos:PutObject',
33.  
    'name/cos:PostObject',
34.  
    // 分片上传
35.  
    'name/cos:InitiateMultipartUpload',
36.  
    'name/cos:ListMultipartUploads',
37.  
    'name/cos:ListParts',
38.  
    'name/cos:UploadPart',
39.  
    'name/cos:CompleteMultipartUpload'
40.  
    )
41.  
    );
42.  
     
43.  
    // 获取临时密钥，计算签名
44.  
    $tempKeys = $sts->getTempKeys($config);
45.  
    return success($tempKeys);
46.  
    //这个success()是我自己弄的个方法写在公共方法里的
47.  
    //就像这样
48.  
    //function success($data)
49.  
    //{
50.  
    // return json(['code' => 10001, 'status' => 'success', 'data' => $data]);
51.  
    //}
52.  
    }
53.  
    }

下一步流程

注意，我是使用的子账号，所以我有在腾讯云COS控制台配置权限，

 访问管理新建一个子用户，然后点击授权，搜索cos的，相关的权限都勾选上基本不会出问题。

添加的时候应该会给你一个secretId和secretKey，记录下来，需要写入到上面的php控制器文件里的

然后储存桶管理添加配置跨域规则跟防盗链哈 

 储存桶管理里面配置子账户权限

 存储桶访问权限跟Policy权限设置这样设置就行了。

自助诊断地址 记住这个地址，后面会用到。

然后这个后端这一块儿配置完了。

继续去配置前端的。

因为用了axios嘛，所以先给前端配置个API 

你们用的啥方法做http请求的就按自己的来哈，只要是个请求就行。

这个是向后端请求临时密钥的接口，记得后端加个权限验证，登录了再给访问接口。

cos.js文件，

1.  
   import request from '@/utils/request'
2.  
    
3.  
   export function getCos(params) {
4.  
   return request({
5.  
   url: '/Cos',
6.  
   method: 'get',
7.  
   params
8.  
   })
9.  
   }

然后接口写好了就要访问嘛。

新建一个js咯，这个里面引入了安装的sdk，跟上面的api，我这个文件放在路由的文件夹里面的，你看自个放哪儿都行

1.  
   // 前端
2.  
   // cos.js
3.  
   import COS from 'cos-js-sdk-v5';
4.  
   import {
5.  
   getCos
6.  
   } from '@/api/cos';
7.  
   // 初始化实例
8.  
   export const cos = new COS({
9.  
   // getAuthorization 必选参数
10.  
    getAuthorization: function(options, callback) {
11.  
    getCos().then(res => {
12.  
    if (res.code == 10001) {
13.  
    var credentials = res.data && res.data.credentials;
14.  
    if (!res || !credentials) return console.error('credentials invalid');
15.  
    callback({
16.  
    TmpSecretId: credentials.tmpSecretId,
17.  
    TmpSecretKey: credentials.tmpSecretKey,
18.  
    XCosSecurityToken: credentials.sessionToken,
19.  
    // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
20.  
    StartTime: res.data.startTime, // 时间戳，单位秒，如：1580000000
21.  
    ExpiredTime: res.data.expiredTime, // 时间戳，单位秒，如：1580000900
22.  
    // ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
23.  
    });
24.  
    }
25.  
    })
26.  
    }
27.  
    });

上面这个代码是我改过的，能用，然后再放一段官方的代码你们看需求用的这个还是官方这个。

1.  
   var COS = require('cos-js-sdk-v5');
2.  
   var cos = new COS({
3.  
   // getAuthorization 必选参数
4.  
   getAuthorization: function (options, callback) {
5.  
   // 异步获取临时密钥
6.  
   // 服务端 JS 和 PHP 例子：https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
7.  
   // 服务端其他语言参考 COS STS SDK ：https://github.com/tencentyun/qcloud-cos-sts-sdk
8.  
   // STS 详细文档指引看：https://cloud.tencent.com/document/product/436/14048
9.  
    
10.  
    var url = 'http://example.com/server/sts.php'; // url替换成您自己的后端服务
11.  
    var xhr = new XMLHttpRequest();
12.  
    xhr.open('GET', url, true);
13.  
    xhr.onload = function (e) {
14.  
    try {
15.  
    var data = JSON.parse(e.target.responseText);
16.  
    var credentials = data.credentials;
17.  
    } catch (e) {
18.  
    }
19.  
    if (!data || !credentials) {
20.  
    return console.error('credentials invalid:\n' JSON.stringify(data, null, 2))
21.  
    };
22.  
    callback({
23.  
    TmpSecretId: credentials.tmpSecretId,
24.  
    TmpSecretKey: credentials.tmpSecretKey,
25.  
    SecurityToken: credentials.sessionToken,
26.  
    // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
27.  
    StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
28.  
    ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000000
29.  
    });
30.  
    };
31.  
    xhr.send();
32.  
    }
33.  
    });

，然后获取密钥的OK了，那肯定要发送了嘛，随便做一个点击事件写个方法测试下。

1.  
   //先引入上面的文件哈
2.  
   import {
3.  
   cos
4.  
   } from '@/router/cos'
5.  
   //然后写个方法里面这样的
6.  
   cos.putObject({
7.  
   Bucket: 'edu-1255457652',
8.  
   /* 必须 */
9.  
   Region: 'ap-chengdu',
10.  
    /* 存储桶所在地域，必须字段 */
11.  
    Key: '1.jpg',
12.  
    // 上传名称
13.  
    body:'XXXX'
14.  
    //文件上传对象或字符串
15.  
    }, function(data) {
16.  
    console.log(data);
17.  
    });

我这里是成功的哈

 既然能上传了，那就封装下。

跟获取临时密钥的放一起不放一起都行

1.  
   //引入COS获取密钥
2.  
   import {
3.  
   cos
4.  
   } from '@/router/cos'
5.  
   // 导出上传方法
6.  
   export function uploadFile(file, keys) {
7.  
   const key = 'Image/' keys; // Key: 对象键（Object 的名称），对象在存储桶中的唯一标识
8.  
   let res = Promise
9.  
   .all([cos]) //获取临时密钥
10.  
    .then((res) => {
11.  
    return new Promise((resolve, reject) => {
12.  
    cos.putObject({
13.  
    Bucket: 'xxxxxxxxxx',
14.  
    /* 后端返回的桶名称,我这里没有从后端返回 */
15.  
    Region: 'xxxxxxxxxxx',
16.  
    /* 桶的对应地区 */
17.  
    Key: key,
18.  
    /* 文件名，也是文件在桶里唯一的标识 */
19.  
    StorageClass: 'STANDARD',
20.  
    Body: file, // 上传文件对象
21.  
    onProgress: function(progressData) {
22.  
    // console.log(JSON.stringify(progressData));
23.  
    }
24.  
    }, function(err, data) { //回调函数
25.  
    if (!err) {
26.  
    //成功返回data对象
27.  
    resolve(data);
28.  
    } else {
29.  
    //失败返回error信息
30.  
    reject(err);
31.  
    }
32.  
    });
33.  
    })
34.  
    })
35.  
    return res
36.  
    }

OK了，就这样，然后使用的话

1.  
   import {
2.  
   uploadFile
3.  
   } from '@/router/update'
4.  
   //引入是必须的
5.  
    
6.  
   //使用
7.  
   uploadFile('1.text，我是名称，也可以是md5加密名字加上.png/.jpg啥的','我是内容，也可以是视频，图片对象啥的，这个地方一般字符串或者对象形式').then(res=>{
8.  
   console.log(res);
9.  
   })

到这儿就结束了，备忘一下。调试中出啥问题，都可以去自助诊断查询，实在不行提交工单，等待大佬技术支持。

这篇好文章是转载于：学新通技术网