uniapp上传文件到腾讯云

官方API地址

javaScript_SDK

下载cos
复制代码
npm i cos-js-sdk-v5 --save
生成签名

获取secretId和secretKey

javascript 复制代码
let cos = new COS({
		SecretId: '*******************************',
		SecretKey: '******************************',
	})

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

上传文件
javascript 复制代码
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文件进行封装

javascript 复制代码
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、调用

javascript 复制代码
<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博客

相关推荐
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
容器魔方2 天前
Bloomberg 正式加入 Karmada 用户组!
云原生·容器·云计算
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
AKAMAI3 天前
Sport Network 凭借 Akamai 实现卓越成就
人工智能·云原生·云计算
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app