cos + vue + Element UI 上传文件的实现

这是将本地文件上传到腾讯云服务器的基本方法,官方也有相应的文档,需要的同学可以去官方文档查看。腾讯云官方文档,着急的同学可以 跟着以下步骤快速实现。

(1)安装 SDK 并引入

安装:

npm i cos-js-sdk-v5 --save

引入:

const COS = require('cos-js-sdk-v5');
// 或
import COS from 'cos-js-sdk-v5';

(2)获取秘钥

这个过程一般是后端去做,此处略去,需要的话官网自查。

(3)初始化

新建一个 cos.js.

import COS from 'cos-js-sdk-v5';export const cos = new COS({// getAuthorization 必选参数getAuthorization: function(options, callback) {const url = `http://example.com/server/sts.php`; // url 替换成您自己的后端服务const xhr = new XMLHttpRequest();let data = null;let credentials = null;xhr.open('GET', url, true);xhr.onload = function (e) {try {data = JSON.parse(e.target.responseText);credentials = data.data;} catch (e) {}callback({TmpSecretId: credentials.tmpSecretId,TmpSecretKey: credentials.tmpSecretKey,SecurityToken: credentials.sessionToken,// 建议返回服务器时间作为签名的开始时间,避免用户浏览器本地时间偏差过大导致签名错误StartTime: 0, // 时间戳,单位秒,如:1580000000ExpiredTime: 1580000000 // 时间戳,单位秒,如:1580000000});};xhr.send();}});

当然这个过程也可以用 axios 实现,此处引用的是官网的方法。

(4)开始上传

<el-upload:http-request="uploadSuccess"action="#":show-file-list="false":before-upload="beforeUpload"><el-button size="mini" type="success" @click="upload(scope.row)">上传</el-button>
</el-upload>        
// 上传音频uploadSuccess(file){const params = {Bucket: 'marketing-report-test-1303824005', /* 填写自己的 bucket,必须字段 */Region: 'ap-beijing',     /* 存储桶所在地域,必须字段 */Key: `map/audio/${file.file.name}.wav`,              /* 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必须字段 */Body: file.file, // 上传文件对象SliceSize: 1024 * 1024 * 5,     /* 触发分块上传的阈值,超过5MB 使用分块上传,小于5MB使用简单上传。可自行设置,非必须 */};cos.uploadFile(params).then(res => {console.log('load', file, `map/audio/${file.file.name}${new Date().valueOf()}.wav`)if(res.statusCode === 200){this.$message.success('音频上传成功');}})},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/3408.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

赋能智慧校园!A3D数字孪生可视化,轻量又高效!

放假之后&#xff0c;学生们会逐步返学&#xff0c;大量人员出入校园&#xff0c;安全更是不容忽视&#xff0c;如何在短时间内对大批人员及设施进行智能监管&#xff1f;数字化转型是关键手段&#xff0c;我们可以融合线上线下数据&#xff0c;搭建3D立体的智慧校园&#xff0…

Unity 按下Play键后,Scene View里面一切正常,但是Game View中什么都没有 -- Camera Clear Flags的设置

问题如下所示。 最先遇到这个问题是我想用Unity开发一个VR 360-degree Image Viewer。在Scene View中可以看到球体&#xff0c;但是Game View什么都看不到。最后找到的原因是&#xff0c;我使用的shader是Skybox/Panorama&#xff0c; 需要把Main Camera的Clear Flags设置成Do…

hanoi塔

hanoi塔问题&#xff1a; 1.规则&#xff1a;一次移动一个盘子&#xff0c;小盘子压大盘子上面&#xff0c;有A、B、C三个柱子&#xff0c;A是起始放盘子的柱子&#xff0c;B是中间可以借助的柱子&#xff0c;C是最后放盘子的位置 2.简单思路&#xff1a; 如果有1个盘子&…

netsh int ipv4 show dynamicport tcp动态端口port设置

netsh int ipv4 show dynamicport tcp netsh int ipv4 set dynamicport tcp start4000 num10000

【Go语言快速上手(四)】面向对象的三大特性引入

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Go语言专栏⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多Go语言知识   &#x1f51d;&#x1f51d; GO快速上手 1. 前言2. 初识GO中的结构…

uniapp 基础阿里云点播 使用

这是加密的 且适用于app端 对于UNI APP端的开发而言&#xff0c;由于上并没有document 不能进行相关的DOM操作&#xff0c;同时有关DOM渲染的第三方库(echart、openlayer等)也无法有效的使用&#xff0c; 因此官方推出了renderjs方案&#xff0c;来解决上述问题。一、官方 ren…

JAVA毕业设计136—基于Java+Springboot+Vue的房屋租赁管理系统(源代码+数据库)

毕设所有选题&#xff1a; https://blog.csdn.net/2303_76227485/article/details/131104075 基于JavaSpringbootVue的房屋租赁管理系统(源代码数据库)136 一、系统介绍 本项目前后端分离&#xff0c;分为管理员、用户、工作人员、房东四种角色 1、用户/房东&#xff1a; …

【网络安全】网络安全协议和防火墙

目录 1、网络层的安全协议&#xff1a;IPsec 协议族 &#xff08;1&#xff09;IP 安全数据报格式 &#xff08;2&#xff09;互联网密钥交换 IKE (Internet Key Exchange) 协议 2、运输层的安全协议&#xff1a;TLS 协议 3、系统安全&#xff1a;防火墙与入侵检测 1、网络…

数据结构篇其二---单链表(C语言+超万字解析)

目录 前言&#xff1a; 一、顺序表的缺点和链表的引入。 二、链表概述 实现一个简单的链表 空链表的概念 三、链表的功能实现 链表的打印 链表节点的创建 链表的头插&#xff08;自上而下看完分析&#xff0c;相信你会有所收获&#xff09; 头插的前置分析 传值调用和…

OSPF的LSA与特殊区域

Area区域概念 *一个区域维护一张LSDB&#xff0c;路由器详细的链路信息只在这个区域内传播 不是每一台路由器都需要了解所有外部目的地的详细信息 *OSPF网络的层次化设计 通过区域ID标识 骨干&#xff08; Backbone &#xff09;区域&#xff0c;必须是area 0(骨干区域…

Dos慢速攻击

这里写自定义目录标题 Dos慢速攻击 Dos慢速攻击 测试结果为“Exit status&#xff1a; No open connections left"&#xff0c;代表无此漏洞。 如果测试结束后connected数量较多&#xff0c;closed数量很少或0&#xff0c;说明之前建立的慢速攻击测试连接没有关闭&#…

书生·浦语 大模型(学习笔记-7)LMDeploy 量化部署 LLM-VLM 实践

目录 一、模型的部署 二、模型部署面临的问题 三、如何解决&#xff08;两种方法&#xff09; 四、LMDeploy相关知识 创建conda环境(漫长的等待) 五、使用LMDeploy与模型对话 六、设置最大KV Cache缓存大小 七、W4A16量化 八、客户端连接API服务器 一、模型的部署 二、…

2024 泛娱乐企业出海音视频选型攻略

前言 在全球化扩张的大潮中&#xff0c;精准选择音视频技术平台对出海企业至关重要。本文将聚焦于评估即构音视频解决方案在关键的五大出海区域的性能表现&#xff0c;并深度解析各地区的市场特征及对应战略。旨在为志在全球市场扩张的企业提供详细的分析和策略指导&#xff0…

NLP step by step -- 了解Transformer

Transformer模型 Transformer相关历史 首先我们先看一下有关Transformer模型的发展历史&#xff0c;下面的图是基于Transformer架构的一些关键模型节点&#xff1a; 图片来源于Hugging Face 图片来源于Hugging Face Transformer 架构 于 2017 年 6 月推出。原本研究的重点是…

Java面试八股之Java中为什么没有全局变量

Java中为什么没有全局变量 Java中没有传统意义上的全局变量&#xff0c;这是因为Java语言设计遵循面向对象的原则&#xff0c;强调封装性和模块化&#xff0c;以及避免全局状态带来的副作用。 封装性&#xff1a; 全局变量违反了面向对象编程中的封装原则&#xff0c;即隐藏对…

Spring Boot集成RabbitMQ快速入门Demo

1.什么是RabbitMQ&#xff1f; RabbitMQ是一款使用Erlang语言开发的&#xff0c;基于AMQP协议的消息中间件&#xff0c;作为一款优秀的消息系统&#xff0c;RabbitMQ有高并发、可扩展等优势&#xff0c;并适用于大型系统中各个模块之间的通信。 RabbitMQ的特点为&#xff1a; 持…

【白盒测试】单元测试的理论基础及用例设计技术(6种)详解

目录 &#x1f31e;前言 &#x1f3de;️1. 单元测试的理论基础 &#x1f30a;1.1 单元测试是什么 &#x1f30a;1.2 单元测试的好处 &#x1f30a;1.3 单元测试的要求 &#x1f30a;1.4 测试框架-Junit4的介绍 &#x1f30a;1.5 单元测试为什么要mock &#x1f3de;️…

《前端面试题》- React - 如何区分函数组件和类组件

问题 如何区分函数组件和类组件&#xff1f; 答案 可以使用instanceof 或者Component.prototype.isReactComponent。 示例 函数组件 export default function FunctionComonent() {if(FunctionComonent.prototype.isReactComponent){console.log(FunctionComonent是类组件…

prompt提示词:AI英语词典优化版Pro,让AI教你学英语,通过AI实现一个网易有道英语词典

目录 一、前言二、效果对比三、优化《AI英语词典》提示词四、其他获奖作品链接 一、前言 不可思议&#xff01;我的AI有道英语字典助手竟然与百度千帆AI应用创意挑战赛K12教育主题赛榜首作品差之毫厘 &#xff0c;真的是高手都是惺惺相惜的&#xff0c;哈哈&#xff0c;自恋一…

docker 集群管理实战mesos+zookeeper+marathon(一)

一 实验环境 1.1 系统版本&#xff0c;本实验使用cnetos7.9版本镜像 1.2 准备5台虚拟机&#xff0c;其中3台master&#xff0c;两台slave&#xff0c;使用克隆的方式 1.3 使用远程连接工具登录 1.4 修改主机名 1.5 设置域名映射 每个虚拟机都配置一下&#xff0c;这里就演示一…