使用第三方总是非常麻烦的，这里使用uniapp的条件编译，给大家带来 微信小程序的上传图片以及H5的上传图片 到腾讯云COS

毕竟文档很难看，由于进行了封装，在最后再显示完整代码

首先解决H5的上传

我这里看的文档是
链接: https://cloud.tencent.com/document/product/436/64960

使用的是putObject，准备好以下数据Bucket和Region，以及创建一个cos对象，这些数据如果是自己创建的存储桶都知道的，不是自己创建的找后端或者项目经理拿

// #ifdef H5
import COS from 'cos-js-sdk-v5';
// #endif
// #ifdef MP-WEIXIN
import COS from 'cos-wx-sdk-v5'
// #endif
const Bucket = ""; /* 填入您自己的存储桶，必须字段 */
const Region = ''; /* 存储桶所在地域，例如ap-beijing，必须字段 */
const cos = new COS({
	SecretId: '',
	SecretKey: '',
})
1.在选完图片之后，先看看返回来的数据是什么格式的

使用putObject进行上传，但是，这个Api要求传入的文件是File对象或者Blob对象

在这里插入图片描述

别问我为什么支持字符串不用字符串，问就是试过，但不行，还是老老实实转File对象和Blob对象吧

如果返回来的数据格式是以上两种中的一种，那皆大欢喜，不是就用以下方法转

(a)如果是base64转Blob对象 用以下方法：
// base64转blob
function parseBlob(dataurl) {
	var arr = dataurl.split(',');
	var mime = arr[0].match(/:(.*?);/)[1];
	var bstr = atob(arr[1]);
	var n = bstr.length;
	var u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], { type: mime });
}
(b)如果是Blob Url(Blob的string)转File对象用以下方法：
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()
	})
}
2.上传

我这里返回来的是base64，就用(a)方法了，点击上传，我这里是自己传的一个文件名，如：xxx.jpg

// 随机生成字符串做名字
function getRandomString(len,type){
  let _charStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',
	min = 0, 
	max = _charStr.length-1, 
	_str = '';                    //定义随机字符串 变量
	//判断是否指定长度，否则默认长度为15
	len = len || 15;
	//循环生成字符串
	for(var i = 0, index; i < len; i++){
		index = (function(randomIndexFunc, i){         
			return randomIndexFunc(min, max, i, randomIndexFunc);
		})(function(min, max, i, _self){
			let indexTemp = Math.floor(Math.random()*(max-min+1)+min),
					numStart = _charStr.length - 10;
			if(i==0&&indexTemp >=numStart){
					indexTemp = _self(min, max, i, _self);
			}
			return indexTemp;
		}, i);
			_str += _charStr[index];
	}
	return _str + '.' + type
},
//H5上传
function h5UploadFile(blob,fileName) {
	//上传图片
	return new Promise(function(resolve, reject) {
		cos.putObject({
			Bucket: Bucket, 
			Region: Region,  
			Key: `/image/${fileName}`,
			Body: blob,
		}, function(err, data) {
		  //data里有返回来的图片地址数据
		  console.log(err || data);
		  resolve(data.Location)
		});
	})
},
uploadImage(event) {
	//event.url 是我要上传到腾讯云的临时地址
	let blob = parseBlob(event.url)
	//图片格式如 png
	const imageType = blob.type.split('/')[1]; 
	 //生成名字如 asdahfskjh.png
	let fileName = getRandomString(30,imageType)
	//这里result就是返回来的上传到腾讯云后的图片地址
	const result = await h5UploadFile(blob,fileName);
}
然后是小程序上传

小程序上传其实更为简单，使用的是postObject，Bucket、region和cos对象都和H5一致，只需要一个方法就行，不需要转File对象或者Blob对象

 function wxUploadFile(filePath,fileName) {
	return new Promise(function(resolve, reject) {
		cos.postObject({
			Bucket: Bucket, /* 必须 */
			Region: Region,    /* 必须 */
			Key:  `/image/${fileName}`,              /* 必须 */
			FilePath: filePath,
			onProgress: function (info) {
				console.log("[cos.postObject-seccess]",JSON.stringify(info));
			} 
		}, function(err, data) {
			 console.log("[cos.postObject-err]",err || data);
			 resolve(data.headers.location)
		});
	})
},
uploadImage(event) {
	//event.url 是我要上传到腾讯云的临时地址
	let filePath = event.url;
	let fileName = filePath.substr(filePath.lastIndexOf('/') + 1);
	const result = await wxUploadFile(filePath,fileName)
}
3.完整代码如下

把上传所需要的方法封装成一个JS文件：attachment.js，方便后续使用
attachment.js

// #ifdef H5
import COS from 'cos-js-sdk-v5';
// #endif
// #ifdef MP-WEIXIN
import COS from 'cos-wx-sdk-v5'
// #endif

const Bucket = ""; /* 填入您自己的存储桶，必须字段 */
const Region = ''; /* 存储桶所在地域，例如ap-beijing，必须字段 */
const cos = new COS({
	SecretId: '',
	SecretKey: '',
})

// #ifdef H5
export function h5UploadFile(blob,fileName) {
	//上传图片
	return new Promise(function(resolve, reject) {
		cos.putObject({
			Bucket: Bucket, 
			Region: Region,  
			Key: `/image/${fileName}`,
			Body: blob,
		}, function(err, data) {
		  	console.log(err || data);
		  	resolve(data.Location)
		});
	})
}

// base64转blob
export function parseBlob(dataurl) {
	var arr = dataurl.split(',');
	var mime = arr[0].match(/:(.*?);/)[1];
	var bstr = atob(arr[1]);
	var n = bstr.length;
	var u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], { type: mime });
}

// 随机生成字符串做名字
export function getRandomString(len,type){
  let _charStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',
	min = 0, 
	max = _charStr.length-1, 
	_str = '';  //定义随机字符串 变量
	//判断是否指定长度，否则默认长度为15
	len = len || 15;
	//循环生成字符串
	for(var i = 0, index; i < len; i++){
		index = (function(randomIndexFunc, i){         
			return randomIndexFunc(min, max, i, randomIndexFunc);
		})(function(min, max, i, _self){
			let indexTemp = Math.floor(Math.random()*(max-min+1)+min),
					numStart = _charStr.length - 10;
			if(i==0&&indexTemp >=numStart){
					indexTemp = _self(min, max, i, _self);
			}
			return indexTemp;
		}, i);
			_str += _charStr[index];
	}
	return _str + '.' + type
}

//bolburl转file
export 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()
	})
}
// #endif

// #ifdef MP-WEIXIN
export function wxUploadFile(filePath,fileName) {
	return new Promise(function(resolve, reject) {
		cos.postObject({
			Bucket: Bucket, /* 必须 */
			Region: Region,    /* 必须 */
			Key:  `/image/${fileName}`,  /* 必须 */
			FilePath: filePath,
			onProgress: function (info) {
				console.log("[cos.postObject-seccess]",JSON.stringify(info));
			} 
		}, function(err, data) {
			 console.log("[cos.postObject-err]",err || data);
			 resolve(data.headers.location)
		});
	})
}
// #endif

使用的页面的methods：

// 上传图片
import {h5UploadFile,wxUploadFile,parseBlob,getRandomString} from '@/api/attachment.js'
export deafault {
	methods: {
		async uploadImage(event) {
			// 将图片上传到腾讯云
			// #ifdef H5
			let blob = parseBlob(event.url)
			const imageType = blob.type.split('/')[1];
			let fileName = getRandomString(30,imageType)
			const result = await h5UploadFile(blob,fileName);
			// #endif
			// #ifdef MP-WEIXIN
			let filePath = event.url;
			let fileName = filePath.substr(filePath.lastIndexOf('/') + 1);
			const result = await wxUploadFile(filePath,fileName)
			// #endif
		}
	}
}
最后，其实那个fileName随你们自己定义，这个没有那么重要，拿到result之后自己复制到浏览器看看能不能查看，能查看就是上传成功了。
# uni-app # 腾讯云 # javascript
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

cover

基于《2023腾讯云容器和函数计算技术实践精选集》—探索腾讯云TKE的Docker容器、Serverless和微服务优势

avatar 腾讯云开发者社区
cover

一站式加速、安全防护，EdgeOne为金融行业数字化升级保驾护航

avatar 腾讯云开发者社区
cover

全球安全加速一站式底座，EdgeOne以极致玩家体验撬动游戏行业增长

avatar 腾讯云开发者社区