官方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博客
