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" ,
			});
		}
	});
},
相关推荐
fakaifa12 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
转角羊儿12 小时前
uni-app请求方法封装⑦
uni-app
java知路12 小时前
uniapp h5实现录音
uni-app
haodanzj14 小时前
在uniapp中封装请求接口 (带刷新token)
前端·javascript·uni-app
空&白14 小时前
uniapp h5地址前端重定向跳转
前端·uni-app
工业互联网专业15 小时前
Python毕业设计选题:基于Django+uniapp的公司订餐系统小程序
vue.js·python·小程序·django·uni-app·源码·课程设计
家里有只小肥猫15 小时前
关于vue生命周期
uni-app·uniapp
不法15 小时前
uniapp 跨域前端代理
前端·uni-app
堕落年代16 小时前
在uniapp当中隐藏掉默认tabbar并且使用自己的tabbar
前端·javascript·uni-app
多客软件佳佳17 小时前
校园交友系统的设计与实现(开源版+三端交付+搭建+售后)
小程序·前端框架·uni-app·开源·php·交友