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" ,
			});
		}
	});
},
相关推荐
毕业设计-016 小时前
0081.基于springboot+uni-app的垃圾分类小程序+论文
spring boot·小程序·uni-app
HappyAcmen6 小时前
关于uniApp的面试题及其答案解析
uni-app
狂团商城小师妹8 小时前
挪车小程序挪车二维码php+uniapp
微信小程序·小程序·uni-app·微信公众平台
外派叙利亚8 小时前
uniapp 连接mqtt
uni-app
治金的blog8 小时前
uniapp 右侧刷新图标 和 返回顶部图标的实现
前端·uni-app
努力小贼8 小时前
uni-app发起网络请求的三种方式
前端·javascript·vue.js·uni-app
qq_316837758 小时前
uniapp 拖拽排序
uni-app
社会底层无业大学生8 小时前
uniapp微信小程序PC端选择文件(无法使用wx.chooseMessageFile问题)
微信小程序·小程序·uni-app
这里是杨杨吖9 小时前
SpringBoot+uniApp日历备忘录小程序系统 附带详细运行指导视频
spring boot·小程序·uni-app·日历备忘录
寰宇软件10 小时前
PHP培训机构教务管理系统小程序源码
小程序·uni-app·vue·php