MUI多图片压缩上传，很简单实现，不用递归阻塞

这段时间我负责的一个项目要用到移动端，不复杂，所以就选择了容易上手的mui，里边有大量的图片上传，一开始没有做压缩，但是考虑到网络和服务器最后还是做了压缩，一开始看到的博客都是单图片压缩，多图片压缩都是递归和阻塞来强制一张一张图片来压缩，在偶尔的情况下我想到了一个巧妙的方法。

废话不多说直接上代码（因为时间关系，代码格式有点乱，先这样后期有空再改）

前端部分：

拍照压缩：

openCamera:function(){
                var _this = this;
                plus.camera.getCamera().captureImage(function(e){
                    _this.aaa.push();    
                    plus.io.resolveLocalFileSystemURL(e, function(entry) {
                        var localUrl = entry.toLocalURL();
                         plus.zip.compressImage({  
                              src: localUrl,  
                              dst: "_doc/chat/camera/" + localUrl,  
                              quality: 20,  
                              overwrite: true  
                         },function(e){
                             _this.imgArr.push(e.target);//将压缩后的地址同意放到一个数 组里
                         }
                         )
                        
                 
                      
                         mui.alert("读取拍照文件错误：" + e.message, '', function() {
                            
                        });
                    });
     
                });  
            },

相册选组压缩：

openPhoto:function(){                
                var _this = this;
                 plus.gallery.pick(function(e) {
                            for(var i in e.files){
                            var localUrl = e.files[i];
                             plus.zip.compressImage({  
                                src: localUrl,  
                                dst: "_doc/chat/camera/" + localUrl,  
                                quality: 20,  
                                overwrite: true  
                           },function(e){
                            _this.imgArr.push(e.target); //放到数组里
                           }
                           )
                          // 其他操作,比如预览展示
                        }
                }, function(e) {
                    mui.toast("没有选择图片");
                },{
                    filter: "image",
                    multiple: true,
                    maximum: 7,
                    system: false,
                    onmaxed: function() {
                    plus.nativeUI.alert('最多只能选择7张图片');
                    }
                });
                
                
                
            },

上传部分：

/* 上传图片 */
            upload:function(){

              //添加图片的本地地址，循环添加，这里后台要是可以处理多图片上传的代码

              for(index in _this.imgArr){
                task.addFile(_this.imgArr[index],{key:_this.imgArr[index]})                
                }
                task.start();


               //真正提交
                var successImg=[];                
                this.flag=true;
                var objectstr="";
                if(this.imgArr.length<2){
                    mui.alert("至少上传2张图片", '', function() {                    
                    });
                }else{
                var _this = this;
                var wt=plus.nativeUI.showWaiting();
                var task=plus.uploader.createUpload("提交图片的url",
                    {method:"POST"},
                    function(t,status){ //上传完成
                        if(status==200){
                            var res=JSON.parse(t.responseText);
                            if(res.error==0){
                           if(res.imgList!=null){
                            var imgarr = JSON.parse(res.imgList);
                            }else{
                                imgarr=[];
                            }
                            for(index in imgarr){
                             successImg.push(imgarr[index]);
                            }                            
                            var str = JSON.stringify(successImg);
                            _this.orderInfo.sureimg=str                            
                            _this.orderInfo.plan2=JSON.stringify(_this.imgArr);                            
                            mui.alert('上传成功', '', function() {
                                
                            });
                            
                             
                            
                            }else{
                                
                                mui.alert(res.message, '', function() {
                                    
                                });
                                result=res.message;
                            }
                            
                            
                            wt.close(); //关闭等待提示按钮
                        }else{
                           result="上传失败"
                            wt.close();//关闭等待提示按钮
                        }
                    }
                );  
                //添加其他参数
                }
            
        
                        }
                })
                
            },

服务器部分就是 可以处理多图片上传的后台代码，一搜一大堆，这里就不贴了

 觉得这里的巧妙的地方就是用到了将压缩后的图片地址放到了一个数组里，然后循环遍历这个数组将地址addfile里。然后一块提交给后台，后台这样返回的是一个装着访问地址的数组。这样就不用递归和阻塞了。

 

哈哈   时间来不及了，就这样吧  有点乱，但是能用，希望可以帮助到需要的人。