uniapp h5项目上传图片到oss（纯前端）

需求：后端给前端一个oss上传地址，前端需要根据getCkOSSToken获取stsToken,使用client.put方法将图片上传成功，并且使用canvas压缩图片

效果图

废话不多说，直接上代码，代码可直接复制，运行

准备工作

cnpm install ali-oss --save


在需要的页面引入
import OSS from 'ali-oss'

1.html

2.javaScript

// 选择图片
			selectImg(e) {
				this.flag = true
				let that = this
				// const OSS = require('ali-oss');
				let path = e.tempFiles[0].file
				console.log(path,'path')
				const file = path;
				if (file) {
					that.compressImage(file, 1024, 0.2, (compressedBlob) => {
						const compressedFile = that.blobToFile(compressedBlob, file.name);
						// 这里拿到最终的File对象 compressedFile，可以用于上传等操作
						this.before(e.tempFiles[0].extname, compressedFile)
					});
				}
			},
/**
			 * 压缩图片
			 */
			compressImage(file, maxWidth, quality, callback) {
				const reader = new FileReader();
				reader.onload = (e) => {
					const img = new Image();
					img.onload = () => {
						const canvas = document.createElement('canvas');
						const ctx = canvas.getContext('2d');

						let width = img.width;
						let height = img.height;

						if (width > maxWidth) {
							height = Math.round((height *= maxWidth / width));
							width = maxWidth;
						}

						canvas.width = width;
						canvas.height = height;

						ctx.drawImage(img, 0, 0, width, height);

						canvas.toBlob((blob) => {
							callback(blob);
						}, "image/jpeg", quality);
					};
					img.src = e.target.result;
				};
				reader.readAsDataURL(file);
			},
/**
			 * 使用uni-file-picker选择图片文件。
               读取图片文件并将其转换为Image对象。
               使用一个Canvas元素来绘制并压缩图片。
               将压缩后的图片从Canvas中导出为Blob对象。
               将Blob转换为File对象。
			 * 
			 */
			blobToFile(blob, fileName) {
				blob.lastModifiedDate = new Date();
				blob.name = fileName;
				return new File([blob], fileName, {
					type: blob.type
				});
			},
//  上传图片路径格式为http://oss-token-test.oss-cn-hangzhou.aliyuncs.com/qzzw/202402/2024022917120012345.png 202402为获取当前年月日 20240229171200为获取当前年月日时分秒 12345为随机数
			before(extname, file) {
				let that = this
				var timestamp = new Date().getTime()
				var time = this.havetime(timestamp)
				var timeMonth = this.haveMonth(timestamp)
				var haveMonthDay = this.haveMonthDay(timestamp)
				uni.request({
					url: 'http://sts.ck9696.com/oss/ckOSSServer/getCkOSSToken',
					method: 'post',
					data: {
						'exchangeTime': time,
						'channelId': '1',
						'channelNo': '1',
						'channelPassword': '1',
						'appVersion': '1',
						'appMobileModel': '1'
					},
					success: function(res) {
						uni.showToast({
							title: res,
							icon: 'none',
							duration: 2000
						})
						res.data.data.bucket = 'oss-token-test'
						res.data.data.endpoint = 'http://oss-cn-hangzhou.aliyuncs.com'
						res.data.data.stsToken = res.data.data.securityToken
						// res.data.data.securityToken = undefined
						let client = new OSS(res.data.data)
						let storeAs = null
						storeAs = '/bsh/' + timeMonth +
							'/' + time + Math.ceil(Math.random() * 10000) + '.' + extname
						client.put(storeAs, file).then(function(result) {
							that.formData.imgUrl = result.url
							that.ImgUrl = [{
								url: result.url
							}]
							console.log(that.ImgUrl, 'that.ImgUrl')
							uni.setStorageSync('ImgUrl', that.ImgUrl);

						}).catch(function(err) {
							// console.log(JSON.stringify(err), 'errrrrrrrrrrrrrrrrrrrrrrrrrrrrr')
						})
					},
					fail: function(res) {
						uni.showToast({
							title: res,
							icon: 'none',
							duration: 2000
						})
					}
				})

			},
haveMonth(unixtime) {
				var date = new Date(unixtime);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				var second = date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				return y + '' + m
				// return y + '-' + m + '-' + d + ' ' + h + ':' + minute;
			},