uni-app选择多张图片上传并压缩——2024.04.02

uni.chooseImage之后plus.zip.compressImage压缩

1、uni.uploadFile(OBJECT)只能循环调用上传(递归)

2、项目对图片压缩后的清晰度要求较高,不使用画布canvas压缩,chooseImage时选择原图。

javascript 复制代码
// 上传图片
chooseImage(){
	uni.chooseImage({
		sizeType: ['original'], //可以指定是原图还是压缩图,默认二者都有
		sourceType: ['album', 'camera'], //拍照
		// count: 1, //1张图
		success: (res) => {
			this.currentFiles = res.tempFilePaths;
			// 在上传某张图片之前压缩
			uni.showLoading({
				title: '照片压缩上传中',
				mask: true
			});
			// 第一张 之后递归
			this.translateapp(this.currentFiles[0], 0, imgUrl => {
				this.currentFiles[0] = imgUrl;
				this.uploadFile(0, imgUrl);
			})
			// 保存到相册
			// 如果是拍照则保存图片到相册
			// 相册选择的图片是以file://开头的绝对路径
			// 拍照返回的是以_doc/开头的相对路径
			var tempFilePaths = res.tempFilePaths[0];
			if (res.tempFilePaths.length == 1 && !tempFilePaths.startsWith('file://')) {
				uni.saveImageToPhotosAlbum({
					filePath: tempFilePaths,
					success: function() {
						console.log('save success');
					},
					fail(e) {
						uni.showToast({
							position: "bottom",
							icon: 'none',
							title: '保存图像到相册失败'
						})
					}
				});
			}
		},
		fail: (err) => {
			// #ifdef APP-PLUS
			// 安卓操作系统
			if(osName != 'ios'){
				if(err.code == 11){
					//用户点击取消
					return;
				}
				uni.showModal({
					title: '错误内容',
					content: '请确认相机权限已开启!',
					showCancel: false
				});
			}
			// #endif
		}
	})
},
// app端压缩图片
translateapp(img, i, callback) {
	plus.io.resolveLocalFileSystemURL(img, (entry) => { //通过URL参数获取目录对象或文件对象
		entry.file((file) => { // 可通过entry对象操作图片 
			console.log('压缩前图片信息:' + JSON.stringify(file)); //压缩前图片信息
			if (file.size > this.imgMaxLength) { //   如果大于imgMaxLength进行压缩
				this.scale = 50;
				plus.zip.compressImage({ // 5+ plus.zip.compressImage 了解一下,有详细的示例
					src: img, //src: 压缩原始图片的路径    
					dst: img.replace('.jpg', 'yasuo.jpg')
						.replace('.JPG', 'yasuo.JPG'),
					width: '100%', //dst: (String 类型 )压缩转换目标图片的路径,这里先在后面原始名后面加一个yasuo区分一下
					height: '100%', //width,height: (String 类型 )缩放图片的宽度,高度
					quality: this.scale, //quality: (Number 类型 )压缩图片的质量
					overwrite: true, //overwrite: (Boolean 类型 )覆盖生成新文件
					// format: 'jpg'   //format: (String 类型 )压缩转换后的图片格式
				}, (event) => {
					console.log('压缩后图片信息:' + JSON.stringify(event));
					callback(event.target);
				}, function(err) {
					console.log('Resolve file URL failed: ' + err.message);
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				});
			} else { //else小于imgMaxLength跳过压缩,直接返回现有的src
				console.log('no resolve');
				// uni.hideLoading();
				callback(img);
			}
		});
	}, (e) => { // 返回错误信息
		console.log('Resolve file URL failed: ' + e.message);
		uni.showToast({
			title: e.message,
			icon: "none"
		})
	});
},
// 上传图片 递归函数 异步
uploadFile(i, file){
	var length = this.currentFiles.length;
	var that = this;
	var url = that.$commonData.uploadUrl[that.ProjectCode];
	uni.uploadFile({
		url: url,//上传的服务器地址
		filePath: file, //要上传文件资源的路径 String类型
		name: 'file',
		header:{
			"Authorization": 'Bearer ' + that.ACCESSTOKEN
		},
		success: function (res) { //当调用uploadFile成功之后,再次调用后台修改的操作
			if (res.statusCode == 200) {
				var responseData = JSON.parse(res.data);
				var item = {};
				if (responseData.result) {
					var Imghash = responseData.result[0].value;
					var type = that.uploadConfig.code;
					if (Imghash) {
						var fileItem = {
							attachmentId: Imghash,
							type: type,
						};
						that.attachmentList.push(fileItem);
					}
					i++;  //递归函数
					console.log('....第' + i + '张上传成功....');
					if (i < length){
						// 第一张 之后递归
						that.translateapp(that.currentFiles[i], i, imgUrl => {
							that.uploadFile(i, imgUrl);
						})
					}
					if (i == length){
						uni.hideLoading();
						uni.showToast({
							title: "图片上传成功",
							icon: "success"
						});
						// 上传attachmentList函数
						that.uploadImage();
					}
				}
			}else{
				uni.hideLoading();
				uni.showToast({
					title: res.data.error.message,
					icon: 'none',
				});
			}
		},
		fail: (err) => {
			uni.hideLoading();
			uni.showToast({
				title: '图片上传失败',
				duration: 2000,
				icon: "none" ,
			});
		}
	});
},
相关推荐
peachSoda72 小时前
uniapp小程序生成海报/图片并保存分享
小程序·uni-app
奔跑吧邓邓子3 小时前
使用 Spring Boot 和 Uniapp 搭建 NFC 读取系统
spring boot·uni-app·nfc数据读取
sunly_11 小时前
uniapp:微信小程序,一键获取手机号
微信小程序·小程序·uni-app
Kx…………21 小时前
Day2:前端项目uniapp壁纸实战
前端·学习·uni-app·实战·项目
高山流水&上善21 小时前
uniapp地图导航及后台百度地图回显(v2/v3版本)
uni-app
Z编程1 天前
uniapp微信小程序引入vant组件库
微信小程序·小程序·uni-app
web_Hsir1 天前
vue + uniapp 实现仿百度地图/高德地图/美团/支付宝 滑动面板 纯css 实现
css·vue.js·uni-app
qq_316837751 天前
uniapp 打包 H5 向 打包的APP 使用 @dcloudio/uni-webview-js 传值
开发语言·javascript·uni-app
WeiAreYoung1 天前
uni-app ucharts自定义换行tooltips
uni-app
搬砖-无恙1 天前
vue+uniapp 获取上一页直接传递的参数
前端·vue.js·uni-app