用小程序中的uni方法实现uView中的upload组件并将图片上传到腾讯云_u-upload cos

一、uni中选择图片的方法与uview中的upload组件选择的不同

1. 功能差异：

   • uni.chooseImage是uni-app框架提供的原生API，用于选择本地相册或拍照获取图片。
   • uview中的upload组件是一个UI组件，用于上传图片或文件到服务器。

2. 调用方式：

   • uni.chooseImage需要在代码中主动调用API来触发选择图片的操作。
   • uview的upload组件是一个UI组件，需要在页面中引入并配置参数，然后通过用户交互来触发选择图片的操作。

3. 上传功能：

   • uni.chooseImage只能选择图片，需要额外编写代码来实现图片上传功能。
   • uview中的upload组件集成了上传功能，可以直接上传选择的图片或文件到服务器。

二、upload的简单使用（详细看uView的官网Upload 上传 | uView - 多平台快速开发的UI框架 - uni-app UI框架 (gitee.io)）

<template>
	<u-upload :action="action" :file-list="fileList" ></u-upload>
</template>
 
<script>
	export default {
		data() {
			// 演示地址，请勿直接使用
			action: 'http://www.example.com/upload',
			fileList: [
				{
					url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				}
			]
		}
	}
</script>

也可以设置手动上传

<template>
	<view>
		<u-upload ref="uUpload" :action="action" :auto-upload="false" ></u-upload>
		<u-button @click="submit">提交</u-button>
	</view>
</template>
 
<script>
	export default {
		data() {
			// 非真实地址
			action: 'http://www.example.com/upload',
		},
		methods: {
			submit() {
				this.$refs.uUpload.upload();
			},
		}
	}
</script>

三、用uniapp的方法实现选择图片并上传腾讯云

1.下载cos

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

2.生成签名

获取secretId和secretKey

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

3.上传文件

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('上传成功');
		}
	});

4.配置cos

四、完整代码

1.新建upload.js文件

import COS from 'cos-js-sdk-v5';
 
//上传图片
export function Upload(selectedFile, filename) {
	console.log(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('上传成功', data);
		}
	});
}
 
//删除图片
export function Delete(filename) {
	console.log(filename);
	// 找到最后一个斜杠的索引
	const lastIndex = filename.lastIndexOf('/');
 
	// 提取最后一个斜杠后面的字段
	const lastSegment = filename.substring(lastIndex + 1);
 
	console.log(lastSegment); // 输出: 289f83ec-cf17-47f1-bd99-b059e0ef33d1
	let cos = new COS({
		SecretId: 'AKIDz6FIRWTHsGg7TfvDXvFdu6OXg2Z9pbWS',
		SecretKey: '9KbnwwnV2dGoMsgQ1eFh2H4reVEnAMSK',
	})
	cos.deleteObject({
		Bucket: 'link-1320976986',
		/* 填写自己的 bucket，必须字段*/
		Region: 'ap-nanjing',
		/* 存储桶所在地域，必须字段 */
		Key: lastSegment,
		/* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
 
	}, function(err, data) {
		if (err) {
			console.log('上传失败', err);
		} else {
			console.log('上传成功', data);
		}
	});
}
 
// 转换文件格式
export const parseFile = (src, name) => {
	// console.log("转换格式");
	//	let that = this
	return new Promise((resolve, reject) => {
		let xhr = null
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
 
		}
		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)
				console.log("resolve(files)");
			} else {
				reject(false)
				console.log("reject(false)");
			}
		}
		xhr.send()
	})
}

2.使用

注意：用uni.chooseimage方法选择的图片路径需要经过处理才能上传云

<view class="jiantou2">
				<u-icon name="more-dot-fill" color="white" @click="morefuck"></u-icon>
			</view>
import {
		Upload,
		Delete,
		parseFile
	} from '@/store/upload.js';
	const morefuck = async () => {
		console.log("想要获取图片");
		uni.chooseImage({
			count: 1, //上传图片的数量，默认是9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: async (res) => {
				console.log(res);
				const tempFilePath = res.tempFilePaths[0]; //拿到选择的图片，是一个数组
				const file = {
					url: tempFilePath, // 临时文件路径
					name: tempFilePath.substring(tempFilePath.lastIndexOf('/') +
						1) // 提取文件名
				};
				console.log(file.name, "key的值");
				uni.uploadFile({
					url: '****************************',
					filePath: tempFilePath,
					name: 'file',
					formData: {
						'key': file.name,
						'success_action_status': '200',
						// 'Signature': '<Signature>',
						'Content-Type': 'image/jpeg',
						'Region': 'ap-nanjing',
						'Bucket': 'link-******************',
						'SecretId': '**********************',
						// 'Timestamp': '<Timestamp>',
						// 'Nonce': '<Nonce>',
					},
					success: function(uploadRes) {
						console.log('upload success', uploadRes)
					},
					fail: function(uploadRes) {
						console.log('upload fail', uploadRes)
					},
					complete: function(uploadRes) {
						console.log('upload complete', uploadRes)
					}
				})
 
 
				const finalurl =
					"url" + file.name;
				totalmition.value.avatar = finalurl;
 
				putUser(totalmition.value).then(data => {
					oldtouxiang.value = totalmition.value.avatar;
					
				})
 
				// 转换格式
				// let blob = await parseFile(file.url, file.name);
				// 上传到腾讯云
				// Upload(blob, file.name);
				//删除老头像
				// console.log(oldoldtouxiang.value, "删除老头像");
				// Delete(oldoldtouxiang.value);
			}
		});
 
	};

这样就能用uni.chooseimage的方法选择图片并且将图片做处理然后上传到腾讯云上