做网站要学的代码,做装修广告网站好,网络服务的工具,扁平式网站源码目录 一、腾讯云后台配置
二、安装SDK
1.script 引入方式
2.webpack 引入方式
三、文件上传
1.new COS 实例
2.上传文件
四、文件下载 腾讯云官方文档#xff1a;
腾讯云官方文档https://cloud.tencent.com/document/product/436/11459 一、腾讯云后台配置
1.登录 对…目录 一、腾讯云后台配置
二、安装SDK
1.script 引入方式
2.webpack 引入方式
三、文件上传
1.new COS 实例
2.上传文件
四、文件下载 腾讯云官方文档
腾讯云官方文档https://cloud.tencent.com/document/product/436/11459 一、腾讯云后台配置
1.登录 对象存储控制台 创建存储桶。获取存储桶名称和 地域名称。
2. 登录 访问管理控制台 获取您的项目 SecretId 和 SecretKey。
3. 配置 CORS 规则AllowHeader 需配成*ExposeHeaders 需要 ETag、Content-Length 以及其他 js 需要读取的 header 字段如下图所示。操作详情请参见 设置跨域访问 文档。 二、安装SDK
1.script 引入方式
!--src为本地路径 根据自己项目目录结构来调整--
script src../dist/cos-js-sdk-v5.min.js/script
2.webpack 引入方式
安装
npm i cos-js-sdk-v5 --save
引入
// node引入方式
const COS require(cos-js-sdk-v5);// js引入方式
import COS from cos-js-sdk-v5;
三、文件上传
本案例用npm方式安装SDK,使用js方式引入。文件上传使用的是高级上传高级上传接口 uploadFile自动针对小文件使用简单上传大文件使用分块上传性能更好。
腾讯云文件高级上传参数https://cloud.tencent.com/document/product/436/64960#.E9.AB.98.E7.BA.A7.E4.B8.8A.E4.BC.A0
1.new COS 实例
import COS from cos-js-sdk-v5;const cos new COS({// getAuthorization 必选参数getAuthorization: function (options, callback) {callback({TmpSecretId: 在控制台查看,TmpSecretKey: 在控制台查看,SecurityToken: 临时密钥_后端返回来的,ExpiredTime: 临时密钥到期时间_后端返回来的, // 时间戳单位秒如1580000000});},
});
后端获得临时密钥的步骤
后端获得临时密钥并返给前端https://cloud.tencent.com/document/product/436/14048
2.上传文件
文件上传我们用的高级上传接口自动识别小文件低于你设置的数据直接上传大文件分片上传。
template!-- 上传组件用的el-upload --el-uploadclassupload-demoaction#dragmultiple:auto-uploadfalse:show-file-listtruev-model:file-listfileList:on-change(file, fileList) {handleChange(file, fileList);}:on-removehandleRemoveel-icon classel-icon--uploadupload-filled //el-icondiv classel-upload__text拖拽文件到这里或者em点击上传/em/div/el-upload
/templatescript setupimport COS from cos-js-sdk-v5;
import { computed, reactive } from vue;//从后端获得临时密钥的请求接口换成你自己的
import { reqCloudInfo } from /api;const state reactive({result: ,
});//从后端获得请求临时密钥换成你自己的
const getData async () {let result await reqCloudInfo();if (result ! undefined) {if (result.error_code 0) {state.result result;} else {console.log(result);}}
};
getData ();// new 一个COS实例
const cos new COS({getAuthorization: function (options, callback) {//credentials 按照你的后端返回来的数据自行赋值let credentials state.result.datas_info.Credentials;callback({TmpSecretId: credentials.TmpSecretId,TmpSecretKey: credentials.TmpSecretKey,SecurityToken: credentials.Token,ExpiredTime: state.result.datas_info.ExpiredTime, // 时间戳单位秒如1580000000});},
});// 文件上传 选择文件时触发(:on-change事件)
const handleChange (uploadFile, uploadFiles) {//cosData 根据你后端返回的数据自行赋值let cosData state.result.datas_info;cos.uploadFile({Bucket: cosData.Bucket /* 填入您自己的存储桶必须字段 */,Region: cosData.Region /* 存储桶所在地域例如ap-beijing必须字段 */,Key:cosData.Key /1.jpg /* 存储在桶里的对象键例如1.jpga/b/test.txt必须字段 */,Body:uploadFile.raw /* 必须上传文件对象可以是input[typefile]标签选择本地文件后得到的file对象 */,SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值超过5MB使用分块上传非必须 */,onTaskReady: function (taskId) {/* 非必须 */console.log(taskId);},onProgress: function (progressData) {/* 非必须 */console.log(JSON.stringify(progressData));},onFileFinish: function (err, data, options) {/* 非必须 */console.log(options.Key 上传 (err ? 失败 : 完成));},},function (err, data) {console.log(err || data);});
};/scriptstyle scoped/style如果报错403:
报错403解决办法https://cloud.tencent.com/document/product/436/54303#message-.E4.B8.BA-.E2.80.9Caccess-denied..E2.80.9D
如果报了“Access Denied.”就是后端临时密钥权限不对让他添加相应字段即可。上传文件的分片上传的文件读取下载的。
四、文件下载
1.方法一得到文件blob类型下载
下载文件到本地
import COS from cos-js-sdk-v5;const cos new COS({// getAuthorization 必选参数getAuthorization: function (options, callback) {callback({TmpSecretId: 在控制台查看,TmpSecretKey: 在控制台查看,SecurityToken: 临时密钥_后端返回来的,ExpiredTime: 临时密钥到期时间_后端返回来的, // 时间戳单位秒如1580000000});},
});//文件下载
cos.getObject({Bucket: /* 填入您自己的存储桶,从后端返回的数据获取*/,Region: /* 存储桶所在地域例如ap-beijing*/,Key: /*你的key*/,DataType: blob,onProgress: function (progressData) {},},function (err, data) {if (data.Body) {//通过浏览器下载const myBlob new window.Blob([data.Body], { type: data.Body.type });let name 文件名字通过cosData.Key获取;const qrUrl window.URL.createObjectURL(myBlob);var fileLink document.createElement(a);fileLink.href qrUrl;fileLink.setAttribute(download, name);document.body.appendChild(fileLink);fileLink.click();}});
2.方法二得到文件URL下载
import COS from cos-js-sdk-v5;const cos new COS({// getAuthorization 必选参数getAuthorization: function (options, callback) {callback({TmpSecretId: 在控制台查看,TmpSecretKey: 在控制台查看,SecurityToken: 临时密钥_后端返回来的,ExpiredTime: 临时密钥到期时间_后端返回来的, // 时间戳单位秒如1580000000});},
});//文件下载cos.getObjectUrl({Bucket: /* 填入您自己的存储桶,从后端返回的数据获取*/,Region: /* 存储桶所在地域例如ap-beijing*/,Key: /*你的key*/,Sign: true, // 获取带签名的对象 URL},function (err, data) {if (err) return console.log(err);/* url为对象访问 url */var url data.Url;var fileLink document.createElement(a);fileLink.href url;fileLink.setAttribute(download, 你的文件名字);document.body.appendChild(fileLink);fileLink.click();});
