Vue3_对接腾讯云COS_大文件分片上传和下载

目录

 一、腾讯云后台配置

二、安装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.”，就是后端临时密钥权限不对，让他添加相应字段即可。上传文件的，分片上传的，文件读取下载的。

四、文件下载

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