Hbuilder中使用plus.zip.compressImag上传图片中涉及到的问题

在Hbuilder开发中,使用plus.zip.compressImage进行图片上传时遇到问题,特别是从相册选择图片无法压缩上传。经排查,问题可能出在文件夹读写权限。调整压缩图片的保存路径并采用递归方式进行图片压缩,解决了循环压缩和上传的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目使用Hbuilder开发,涉及到了图片上传,plus.zip.compressImage当然就是不二选择.

但是在使用过程中,有一系列的问题.

1.使用相机拍照的图片,可以正常压缩上传.

2.如果是从相册中选择的图片,很大几率上就不能压缩上传,不乱选择的是单张还是多张.

3.如果从相册中选择的是多张图片,有涉及到图片的循环压缩上传.需要考虑到图片压缩耗时较长.

后来发现,如果是从系统相册中选择图片,则不会成功,但是从其他app保存下来的图片文件夹中选择,就可以成功压缩上传.测试了一下,把同一张图片从系统相册DCIM复制到其他任意的应用的文件中,重新选择上传.成功压缩并上传.

初步确认是文件夹读写权限的问题.

原来的压缩方法.

	function compressAndUploadImgs(e,qa,file_index){
		var files_length = e.files.length ;
		var path = e.files[file_index];
		var parent_file_path = path.substring(0,path.lastIndexOf('/')+1);
		var file_name = path.substring(path.lastIndexOf('/')+1,path.length);
		var file_pure_name = file_name.substring(0,file_name.indexOf('.'));
		var file_type = file_name.substring(file_name.indexOf('.'));
		var random_num = createRandomNumber();
		var file_compress_name = parent_file_path + random_num+file_type ;	
		plus.zip.compressImage({
				src:path,
				dst:file_compress_name,
				quality:qa,
				overwrite:true
			},
			function() {
				// 成功回调逻辑
			},function(error) {
				// 错误回调逻辑
		});	
	}


压缩之后的文件保存位置和原来的文件保存位置相同,原来也打印过error信息,说是输入错误,只是一直认为提示过于简单,不知道具体意思.,现在想想,确实是就是图片压缩之后保存的时候,不能正常输出保存的原因.

后来把输出的路径给改了,代码如下:

	function compressAndUploadImgs(e,qa,file_index){
		var files_length = e.files.length ;
		var path = e.files[file_index];
		var parent_file_path = path.substring(0,path.lastIndexOf('/')+1);
		var file_name = path.substring(path.lastIndexOf('/')+1,path.length);
		var file_pure_name = file_name.substring(0,file_name.indexOf('.'));
		var file_type = file_name.substring(file_name.indexOf('.'));
		var random_num = createRandomNumber();
		var file_compress_name = random_num+file_type ;	
		plus.zip.compressImage({
				src:path,
				dst:'compresspic/'+file_compress_name,
				quality:qa,
				overwrite:true
			},
			function() {
				// console.log('压缩成功');
				var next_file_index = file_index + 1 ;
				var relativePath = "compresspic/" + file_compress_name;
				//检查图片是否已存在
				plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {
				var compress_path = entry.toLocalURL(); // 输入图片的路径,将相对路径转换为绝对路径
				// 其他逻辑	       
				}, function(e) {
					// 本地保存失败逻辑		        
				});
			},function(error) {
				// 压缩失败逻辑			
		});	
	}


图片就可以成功压缩保存了,使用es文件浏览器去项目下的路径找找.压缩过的图片就会保存在compresspic文件夹下,也省的时间长了之后,原文件所在的文件夹中的文件会充满了原图片和压缩过的图片,变的乱糟糟.

循环压缩:

图片压缩是一个相对较为耗时的操作.不能简单的使用for循环来实现,可能这边for循环尚未执行完,for之后的图片上传逻辑已经开始执行,结果自然会失败.

在Hbuilder的官方qq群中也问过几次,最终才去递归压缩的方式,只有前一张图片返回结果之后,不论成功与否,才开始压缩下一张,同时记录当前的文件索引和总的文件数量,每次压缩的时候进行对比,如果当前索引小于总的文件数量,则递归调用,否则就调用图片上传的逻辑.

代码如下;

	function compressAndUploadImgs(e,qa,file_index){
		var files_length = e.files.length ;
		var path = e.files[file_index];
		var parent_file_path = path.substring(0,path.lastIndexOf('/')+1);
		var file_name = path.substring(path.lastIndexOf('/')+1,path.length);
		var file_pure_name = file_name.substring(0,file_name.indexOf('.'));
		var file_type = file_name.substring(file_name.indexOf('.'));
		var random_num = createRandomNumber();
		var file_compress_name = random_num+file_type ;	
		plus.zip.compressImage({
				src:path,
				dst:'compresspic/'+file_compress_name,
				quality:qa,
				overwrite:true
			},
			function() {
				// console.log('压缩成功');
				var next_file_index = file_index + 1 ;
				var relativePath = "compresspic/" + file_compress_name;
				//检查图片是否已存在
				plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {
				// console.log('压缩成功本地存在:'+entry.toLocalURL());
					f1.push(entry.toLocalURL()) ;
					if(next_file_index < files_length){
						compressAndUploadImgs(e,'20',next_file_index);
					}else{
						imgupgrade();
					}	       
				}, function(e) {
					// console.log('压缩成功,本地不存在:'+path);
					if(next_file_index < files_length){
						compressAndUploadImgs(e,'20',next_file_index);
					}else{
						imgupgrade();
					}		        
				});
			},function(error) {
				f1.push(path); // 压缩失败时原图上传
				var next_file_index = file_index + 1 ;			
				if(next_file_index < files_length){
					compressAndUploadImgs(e,'20',next_file_index);
				}else{
					imgupgrade();// 上传
				}			
		});	
	}	


其实就是上一段代码中间进行了递归逻辑的填充.

然后,世界就又变的美好了.

在uni-app中使用`plus.zip.compressVideo`方法压缩视频需要使用HBuilderX进行开发,并在真机环境下运行。 以下是一个示例代码,演示如何在uni-app中使用`plus.zip.compressVideo`方法压缩视频: ```vue <template> <view> <button @click="compressVideo">压缩视频</button> </view> </template> <script> export default { methods: { compressVideo() { const self = this; plus.gallery.pick(function (e) { plus.zip.compressVideo({ src: e, dst: '_doc/compressed.mp4', quality: 0.5, overwrite: true }, function (event) { console.log('视频压缩成功'); console.log('压缩后的视频路径:' + event.target); self.getCompressedVideoSize(event.target); }, function (error) { console.log('视频压缩失败:' + error.message); }); }, function (error) { console.log('选择视频失败:' + error.message); }, { filter: 'video', multiple: false }); }, getCompressedVideoSize(path) { plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function (fs) { fs.root.getFile(path, { create: false }, function (fileEntry) { fileEntry.getMetadata(function (metadata) { // 获取压缩后的视频文件大小 const size = metadata.size; console.log('压缩后的视频文件大小:' + size + ' bytes'); }, function (error) { console.log('获取压缩后的视频文件大小失败:' + error.message); }); }, function (error) { console.log('获取压缩后的视频文件失败:' + error.message); }); }, function (error) { console.log('请求文件系统失败:' + error.message); }); } } } </script> ``` 在这个示例中,我们通过点击按钮调用`compressVideo`方法来选择视频并进行压缩。在视频压缩成功后,我们通过`plus.io.requestFileSystem`来获取压缩后的视频文件大小。 需要注意的是,使用`plus.zip.compressVideo`方法进行视频压缩需要在真机环境下运行,无法在模拟器中测试。 希望这个示例对你有帮助!如果还有其他问题,请随时提问。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值