admin管理员组文章数量:1666532
最近一个项目需要用到前端COS上传文件,网上找了很多教程都是不清不楚的,搞懂了写个文章记录。
内容有点长,一点一点看
VUE使用的是js的上传SDK,先给vue安装一下。
npm i cos-js-sdk-v5 --save
前端第一步的活儿干完了,然后就是后端,因为考虑安全问题,所以我使用了临时密钥上传。
我的后端是Thinkphp6,所以采用了php的临时密钥生成的代码。
- composer 安装临时生成密钥
如果根目录有composer.json文件则将创建"qcloud_sts/qcloud-sts-sdk": "3.0.*"加入require里面
否则创建composer.json的文件,内容如下:
{
"require":{
"qcloud_sts/qcloud-sts-sdk": "3.0.*"
}
}
添加好了后命令提示符到后端根目录下执行 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":{ 这一节是我自己加上去的
下面是控制器的代码
<?php
declare(strict_types=1);
namespace app\controller;
use QCloud\COSSTS\Sts;
class Cos
{
/**
* 获取临时密钥,计算签名
*
* @return \think\Response
*/
public function index()
{
$sts = new Sts();
$config = array(
'url' => 'https://sts.tencentcloudapi/', // url和domain保持一致
'domain' => 'sts.tencentcloudapi', // 域名,非必须,默认为 sts.tencentcloudapi
'proxy' => '',
'secretId' => "XXXXXXXXXXXXXXXXXX", // 固定密钥,若为明文密钥,请直接以'xxx'形式填入,不要填写到getenv()函数中
'secretKey' => "XXXXXXXXXXXXXXXXXX", // 固定密钥,若为明文密钥,请直接以'xxx'形式填入,不要填写到getenv()函数中
'bucket' => "储存桶名称", // 换成你的 bucket
'region' => "储存桶地区", // 换成 bucket 所在园区
'durationSeconds' => 1800, // 密钥有效期
'allowPrefix' => '*', // 这里改成允许的路径前缀,可以根据自己网站的用户登录态判断允许上传的具体路径,例子: a.jpg 或者 a/* 或者 * (使用通配符*存在重大安全风险, 请谨慎评估使用)
// 密钥的权限列表。简单上传和分片需要以下的权限,其他权限列表请看 https://cloud.tencent/document/product/436/31923
'allowActions' => array(
// 简单上传
'name/cos:PutObject',
'name/cos:PostObject',
// 分片上传
'name/cos:InitiateMultipartUpload',
'name/cos:ListMultipartUploads',
'name/cos:ListParts',
'name/cos:UploadPart',
'name/cos:CompleteMultipartUpload'
)
);
// 获取临时密钥,计算签名
$tempKeys = $sts->getTempKeys($config);
return success($tempKeys);
//这个success()是我自己弄的个方法写在公共方法里的
//就像这样
//function success($data)
//{
// return json(['code' => 10001, 'status' => 'success', 'data' => $data]);
//}
}
}
下一步流程
注意,我是使用的子账号,所以我有在腾讯云COS控制台配置权限,
访问管理新建一个子用户,然后点击授权,搜索cos的,相关的权限都勾选上基本不会出问题。
添加的时候应该会给你一个secretId和secretKey,记录下来,需要写入到上面的php控制器文件里的
然后储存桶管理添加配置跨域规则跟防盗链哈
储存桶管理里面配置子账户权限
存储桶访问权限跟Policy权限设置这样设置就行了。
自助诊断地址 记住这个地址,后面会用到。
然后这个后端这一块儿配置完了。
继续去配置前端的。
因为用了axios嘛,所以先给前端配置个API
你们用的啥方法做http请求的就按自己的来哈,只要是个请求就行。
这个是向后端请求临时密钥的接口,记得后端加个权限验证,登录了再给访问接口。
cos.js文件,
import request from '@/utils/request'
export function getCos(params) {
return request({
url: '/Cos',
method: 'get',
params
})
}
然后接口写好了就要访问嘛。
新建一个js咯,这个里面引入了安装的sdk,跟上面的api,我这个文件放在路由的文件夹里面的,你看自个放哪儿都行
// 前端
// cos.js
import COS from 'cos-js-sdk-v5';
import {
getCos
} from '@/api/cos';
// 初始化实例
export const cos = new COS({
// getAuthorization 必选参数
getAuthorization: function(options, callback) {
getCos().then(res => {
if (res.code == 10001) {
var credentials = res.data && res.data.credentials;
if (!res || !credentials) return console.error('credentials invalid');
callback({
TmpSecretId: credentials.tmpSecretId,
TmpSecretKey: credentials.tmpSecretKey,
XCosSecurityToken: credentials.sessionToken,
// 建议返回服务器时间作为签名的开始时间,避免用户浏览器本地时间偏差过大导致签名错误
StartTime: res.data.startTime, // 时间戳,单位秒,如:1580000000
ExpiredTime: res.data.expiredTime, // 时间戳,单位秒,如:1580000900
// ScopeLimit: true, // 细粒度控制权限需要设为 true,会限制密钥只在相同请求时重复使用
});
}
})
}
});
上面这个代码是我改过的,能用,然后再放一段官方的代码你们看需求用的这个还是官方这个。
var COS = require('cos-js-sdk-v5');
var cos = new COS({
// getAuthorization 必选参数
getAuthorization: function (options, callback) {
// 异步获取临时密钥
// 服务端 JS 和 PHP 例子:https://github/tencentyun/cos-js-sdk-v5/blob/master/server/
// 服务端其他语言参考 COS STS SDK :https://github/tencentyun/qcloud-cos-sts-sdk
// STS 详细文档指引看:https://cloud.tencent/document/product/436/14048
var url = 'http://example/server/sts.php'; // url替换成您自己的后端服务
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function (e) {
try {
var data = JSON.parse(e.target.responseText);
var credentials = data.credentials;
} catch (e) {
}
if (!data || !credentials) {
return console.error('credentials invalid:\n' + JSON.stringify(data, null, 2))
};
callback({
TmpSecretId: credentials.tmpSecretId,
TmpSecretKey: credentials.tmpSecretKey,
SecurityToken: credentials.sessionToken,
// 建议返回服务器时间作为签名的开始时间,避免用户浏览器本地时间偏差过大导致签名错误
StartTime: data.startTime, // 时间戳,单位秒,如:1580000000
ExpiredTime: data.expiredTime, // 时间戳,单位秒,如:1580000000
});
};
xhr.send();
}
});
,然后获取密钥的OK了,那肯定要发送了嘛,随便做一个点击事件写个方法测试下。
//先引入上面的文件哈
import {
cos
} from '@/router/cos'
//然后写个方法里面这样的
cos.putObject({
Bucket: 'edu-1255457652',
/* 必须 */
Region: 'ap-chengdu',
/* 存储桶所在地域,必须字段 */
Key: '1.jpg',
// 上传名称
body:'XXXX'
//文件上传对象或字符串
}, function(data) {
console.log(data);
});
我这里是成功的哈
既然能上传了,那就封装下。
跟获取临时密钥的放一起不放一起都行
//引入COS获取密钥
import {
cos
} from '@/router/cos'
// 导出上传方法
export function uploadFile(file, keys) {
const key = 'Image/' + keys; // Key: 对象键(Object 的名称),对象在存储桶中的唯一标识
let res = Promise
.all([cos]) //获取临时密钥
.then((res) => {
return new Promise((resolve, reject) => {
cos.putObject({
Bucket: 'xxxxxxxxxx',
/* 后端返回的桶名称,我这里没有从后端返回 */
Region: 'xxxxxxxxxxx',
/* 桶的对应地区 */
Key: key,
/* 文件名,也是文件在桶里唯一的标识 */
StorageClass: 'STANDARD',
Body: file, // 上传文件对象
onProgress: function(progressData) {
// console.log(JSON.stringify(progressData));
}
}, function(err, data) { //回调函数
if (!err) {
//成功返回data对象
resolve(data);
} else {
//失败返回error信息
reject(err);
}
});
})
})
return res
}
OK了,就这样,然后使用的话
import {
uploadFile
} from '@/router/update'
//引入是必须的
//使用
uploadFile('1.text,我是名称,也可以是md5加密名字加上.png/.jpg啥的','我是内容,也可以是视频,图片对象啥的,这个地方一般字符串或者对象形式').then(res=>{
console.log(res);
})
到这儿就结束了,备忘一下。调试中出啥问题,都可以去自助诊断查询,实在不行提交工单,等待大佬技术支持。
版权声明:本文标题:vue使用腾讯云COS上传文件-很清楚的哈。 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1730064917a1221285.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论