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" ,
			});
		}
	});
},
相关推荐
雪芽蓝域zzs2 小时前
uni-app 将 base64 图片编码转为 Blob 本地文件路径
网络协议·udp·uni-app
星光一影4 小时前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码
mysql·小程序·uni-app·php
Qlittleboy6 小时前
uniapp里 rich-text 里的img图片如何控制最大宽度
uni-app
阿奇__6 小时前
uniapp h5 app 小程序获取当前定位
小程序·uni-app
*小雪6 小时前
uniapp写H5授权登录及分享,返回到目标页面
开发语言·javascript·uni-app
一只程序熊6 小时前
uniapp uniim ios配置消息推送
uni-app
2501_915106329 小时前
iOS性能调优的系统化实践,从架构分层到多工具协同的全流程优化指南(开发者深度版)
android·ios·小程序·架构·uni-app·iphone·webview
TE-茶叶蛋1 天前
Uniapp运行MuMu模拟器
uni-app
一人一程温一壶酒1 天前
微信小程序uniapp开发附源码——图片加水印
微信小程序·uni-app·notepad++
一个假的前端男1 天前
uniapp 3端轮播
前端·javascript·uni-app