目錄

?一、騰訊云后臺配置

二、安裝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-uploadclass="upload-demo"action="#"dragmultiple:auto-upload="false":show-file-list="true"v-model:file-list="fileList":on-change="(file, fileList) => {handleChange(file, fileList);}":on-remove="handleRemove"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">拖拽文件到這里或者<em>點擊上傳</em></div></el-upload>
</template><script setup>import 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.jpg，a/b/test.txt），必須字段 */,Body:uploadFile.raw /* 必須，上傳文件對象，可以是input[type="file"]標簽選擇本地文件后得到的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);});
};</script><style 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.”，就是后端臨時密鑰權限不對，讓他添加相應字段即可。上傳文件的，分片上傳的，文件讀取下載的。

四、文件下載

下載文件到本地：

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();}});