uniapp上传文件到腾讯云

news/2024/4/25 8:17:31
官方API地址

javaScript_SDK

 下载cos
npm i cos-js-sdk-v5 --save
生成签名

获取secretId和secretKey

let cos = new COS({SecretId: '*******************************',SecretKey: '******************************',})

参考文章:腾讯云如何获取secretId和secretKey_腾讯云 对象存储 只有secretid 没有secretkey-CSDN博客

上传文件
cos.uploadFile({Bucket: 'link-******',/* 填写自己的 bucket,必须字段*/Region: 'ap-nanjing',/* 存储桶所在地域,必须字段 */Key: filename,/* 存储在桶里的对象键(例如:1.jpg,a/b/test.txt,图片.jpg)支持中文,必须字段 */Body: selectedFile, // 上传文件对象SliceSize: 1024 * 1024 * 5,/* 触发分块上传的阈值,超过5MB使用分块上传,小于5MB使用简单上传。可自行设置,非必须 */onProgress: function(progressData) {console.log(JSON.stringify(progressData));}}, function(err, data) {if (err) {console.log('上传失败', err);} else {console.log('上传成功');}});
配置CORS

appleId很明显就是识别身份用的

SecretId和SecretKey是用来生成签名的(我后面会说)

Bucket和Region是用来识别地区信息的

完整代码

1、创建upload.js文件进行封装

import COS from 'cos-js-sdk-v5';//引入export function Upload(selectedFile, filename) {console.log(selectedFile, filename);//selectedFile:文件, filename:文件名称let cos = new COS({SecretId: '********************************',SecretKey: '********************************',})cos.uploadFile({Bucket: 'link-*********',/* 填写自己的 bucket,必须字段*/Region: 'ap-nanjing',/* 存储桶所在地域,必须字段 */Key: filename,/* 存储在桶里的对象键(例如:1.jpg,a/b/test.txt,图片.jpg)支持中文,必须字段 */Body: selectedFile, // 上传文件对象SliceSize: 1024 * 1024 * 5,/* 触发分块上传的阈值,超过5MB使用分块上传,小于5MB使用简单上传。可自行设置,非必须 */onProgress: function(progressData) {console.log(JSON.stringify(progressData));}}, function(err, data) {if (err) {console.log('上传失败', err);} else {console.log('上传成功');}});}

2、调用

<template><view><u-upload  @afterRead="afterRead"name="1" multiple :maxCount="1"></u-upload></view>
</template><script setup>import {ref} from 'vue';import {Upload} from '@/store/upload.js'function parseFile(src, name) {//	let that = thisreturn new Promise((resolve, reject) => {let xhr = new XMLHttpRequest()xhr.open('GET', src, true)xhr.responseType = 'blob'xhr.onload = function(e) {if (this.status == 200) {let myBlob = this.responselet files = new window.File([myBlob],name, {type: myBlob.type}) // myBlob.type 自定义文件名resolve(files)} else {reject(false)}}xhr.send()})}// 新增图片const afterRead = async (event) => {console.log(event, "event");const file = event.file[0];let blob = await parseFile(file.url, file.name)Upload(blob, file.name);}
</script><style lang="scss"></style>

不知道为什么,组件库获得的file文件对象不能直接上传成功,需要转换格式,所以我就进行了格式转换

其他相关文章:

使用腾讯云COS提示CORS策略阻止的解决方案-CSDN博客        

报错Error: params body format error, Only allow File|Blob|String文件上传到腾讯云 ,转换文件格式-CSDN博客


https://www.xjx100.cn/news/3280739.html

相关文章

android framework - startActivity

这里写自定义目录标题 前言源码 前言 相信应用开发对startActivity这个调用接口都不陌生&#xff0c;知道其能够跳转页面&#xff0c;然而&#xff0c;其具体是怎么跳转的&#xff0c;以及跳转关联的页面生命周期又是如何变化的&#xff0c;之前一直是知其然而不知其所以然&am…

【MySQL】Navicat/SQLyog连接Ubuntu中的数据库(MySQL)

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 前言一、安装…

【c#实现用户连续按下指定按键后执行关闭窗口】

想实现在用户连续按下例如 “abc” 键时执行关闭窗口的操作&#xff0c;可以修改代码以检测用户按键序列是否为 “abc”。以下是一个示例代码&#xff1a; using System; using System.Windows.Forms;namespace ThreeKeyPressCloseExample {public partial class MainForm : F…

线阵相机参数介绍之轴编码器控制

1.1 功能介绍 编码器是将检测对象的运动与相机拍摄取图相匹配的设备&#xff0c;也即检测对象运动一定距离&#xff0c;相机就拍摄一定行高的图像。 编码器会将检测对象的实际位移转换为固定数量电信号。例如&#xff1a;编码器的精度是2000p/r,该参数的含义是编码器每转一圈输…

摄像设备+nginx+rtmp服务器

前言 由于html中的video现在不支持rtmp协议(需要重写播放器框架&#xff0c;flash被一刀切&#xff0c;360浏览器还在支持flash),遂用rtmp作为桥梁,实际是hls协议在html中起作用. 在此推荐一款前端播放器,.ckplayer 简直了,写点页面,一直循环&#xff0c;洗脑神曲 dream it po…

PPT怎么输出PDF(不留白)

1、首先选中所有元素&#xff0c;右键点击“组合”形成一个对象。然后查看该对象的高度和宽度。 2、在设计->自定义->幻灯片大小中-->选择“自定义”&#xff0c;然后修改高度和宽度稍稍大于选中对象的值。点击“最大化”。 3、输出为PDF即可

python3 flask 实现对config.yaml文件的内容的增删改查,并重启服务

config.yaml配置文件内容 功能就是userpass下的用户名和密码做增删改查&#xff0c;并重启hy2服务 auth:type: userpassuserpass:csdn: csdnlisten: :443 masquerade:proxy:rewriteHost: trueurl: https://www.bing.com/type: proxy tls:cert: /root/hyst*****马赛克******er…

线阵相机之帧超时

1 帧超时的效果 在帧超时时间内相机若未采集完一张图像所需的行数&#xff0c;则相机会直接完成这张图像的采集&#xff0c;并自动将缺失行数补黑出图&#xff0c;机制有以下几种选择&#xff1a; 1. 丢弃整张补黑的图像 2. 保留补黑部分出图 3.丢弃补黑部分出图