官方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 = this
		return 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.response
					let 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博客