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

项目使用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();// 上传
				}			
		});	
	}	

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

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