移动端Vue图片获取,压缩,预览组件-upload-img(H5+获取照片,压缩,预览)

组件示例图

组件代码 upload_img.vue

  <div id="uploadImg">
    <div class="upload_image_box" v-show="show1">
      <div class="upload_image">
        <div class="photo_box" @click="actionSheet()">
          <img class="icon_photo" src="../../assets/images/icon_photo.png" />
          <p><span>{{$t('m.btn_0011')}}</span></p>
        </div>
      </div>
    </div>
    <div class="uploaded" v-show="show2">
      <div v-for="(item,index) in imgLists" class="imgItem">
        <img @click="deleteImg(index)" class="delete" src="../../assets/images/icon_x.png">
        <img :src="item" class="img" @click="previewPicture(index)">
      </div>
      <div class="imgUpload" @click="actionSheet()">
        <img class="icon_photo" src="../../assets/images/icon_photo.png" />
        <p><span>{{$t('m.btn_0011')}}</span></p>
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast, Indicator} from "mint-ui"
  export default({
    props: [
      'imgList',
      'showUpload',
      'showUploaded',
      'maxPic',//用户传的最大的照片数目
      'zipTo' // 压缩到多少KB(可选,默认到1024K)
    ],
    data() {
    	return {
    		show1: true,
        show2: false
    	}
    },
    computed: {
    	imgLists() {
    		return this.imgList || []
    	},
      getMaxPic() {
        return this.maxPic*1 || 1
      }
    },
    watch: {
    	imgLists(newValue, oldValue) {
    		if(newValue.length > 0){
    		  this.show1 = false;
    		  this.show2 = true;
    		} else {
    		  this.show1 = true;
    		  this.show2 = false;
    		}
    	}
    },
    methods: {
    	actionSheet() {
        let that = this
    	  plus.nativeUI.actionSheet({
    	      title: "获取照片",
    	      cancel: "取消",
    	      buttons: [
    	        {
    	          title: "拍照"
    	        },
    	        {
    	          title: "相册"
    	        },
    	      ]
    	    },
    	    function(e) { //点击回调
            switch(e.index) {
              case 0:
                break;
              case 1:
                that.cameraImg(); /*拍照*/
                break;
              case 2:
                that.galleryImg(); /*打开相册*/
                break;
              default:
                break;
            }
    	    }
    	  );
    	},
    	galleryImg() {
    	  let that = this;
    	  plus.gallery.pick(
    	    function(e) {
    	      for (var i in e.files) {
    	        var path = e.files[i]; // file:///storage/emulated/0/截屏、超级截屏_20180803_112739.png
    	        if (that.imgLists.length < that.getMaxPic) {
                plus.io.resolveLocalFileSystemURL(path, function(entry) { //entry 请求到的目录或文件对象
                  var fileSystem = entry.fileSystem
                  var fileInfo = {};
                  entry.file(function(file){ // 获取文件信息
                    fileInfo = file;
                    let zipTo = that.zipTo; // KB
                    that.zipPicture(path, fileInfo, zipTo)
                    .then(function(zipObj){
                      if(zipObj && zipObj.target){
                        Indicator.open();
                        console.log('107:', that.imgLists, zipObj.target,!that.imgLists.includes(zipObj.target))
                        if(!that.imgLists.includes(zipObj.target)){
                          that.getBase64(zipObj.target) //zipObj.target -压缩后的文件所在的路径
                          .then(function(dataURL){ //dataUrl -压缩后的文件的base64编码
                            that.dataURLtoFile(dataURL, fileInfo.name)
                            .then(function(f){ // f - base64转成文件后的文件对象
                              let fileBigObj = {
                                path: zipObj.target,
                                file: f
                              }
                              console.log(fileBigObj);
                              that.$emit('pickPic',fileBigObj)
                              return fileBigObj;
                            })
                          })
                        }else{
                          Toast({message: '同一张图片不能重复提交'})
                        }
                      }
                    })
                    .catch(function(zipErr){
                      that.zipErrHandle(zipErr, fileInfo)
                    })
                  })
                })
              } else {
    	          that.$alert(i18n.t('m.msg_0005')+`${that.getMaxPic}`+i18n.t('m.msg_0007'));
                break;
    	        }
    	      }
    	    },
    	    function(error) {
            Indicator.close();
            if(error.code == 12){
              Toast({message: '用户取消'})
            }else{
              that.galleryPermission(error)
            }
          },
          {
    	      filter: "image",
    	      multiple: true, // 设置了此项,选择成功返回的是一个包含键名为files的路径数组的对象,否则为单一路径;
            maximum: that.getMaxPic - that.imgLists.length
    	    });
    	},
    	cameraImg() { // 调用相机
    	  let that = this;
    	  let c = plus.camera.getCamera();
        let hasCamera  = that.cameraPermission()// 相机权限
        if(!hasCamera) return
    	  c.captureImage(function(e) {
    	    //获取操作文件或目录对象
    	    plus.io.resolveLocalFileSystemURL(e, function(entry) { //entry 请求到的目录或文件对象
    	      that.showUpload = false;
    	      that.showUploaded = true;
    	      var path = entry.toLocalURL() //toLocalURL: 获取目录路径转换为本地路径URL地址
            //压缩图片
            plus.io.resolveLocalFileSystemURL(path, function(entry) { //entry 请求到的目录或文件对象
              var fileSystem = entry.fileSystem
              var fileInfo = {};
              entry.file(function(file){ // 获取文件信息
                fileInfo = file;
                let zipTo = that.zipTo; // KB
                that.zipPicture(path, fileInfo, zipTo)
                .then(function(zipObj){
                  if(zipObj && zipObj.target){
                    Indicator.open();
                    if(!that.imgLists.includes(zipObj.target)){
                      that.getBase64(zipObj.target) //zipObj.target -压缩后的文件所在的路径
                      .then(function(dataURL){ //dataUrl -压缩后的文件的base64编码
                        that.dataURLtoFile(dataURL, fileInfo.name)
                        .then(function(f){ // f - base64转成文件后的文件对象
                          let fileBigObj = {
                            path: zipObj.target,
                            file: f
                          }
                          console.log(fileBigObj);
                          that.$emit('pickPic',fileBigObj)
                          return fileBigObj;
                        })
                      })
                    } else {
                      Toast({message: '同一张图片不能重复提交'})
                    }
                  }
                })
                .catch(function(zipErr){
                  that.zipErrHandle(zipErr, fileInfo)
                })
              })
            })

    	    }, function(e) {
    	      console.log("读取拍照文件错误：" + e.message);
    	    });
    	  }, function(error) {
    	    if(error.code == 11){
    	      Toast({message: '用户取消'})
    	    }
    	  }, {
    	    filename: "_doc/" //拍照文件存放的路径
    	  })
    	},
    	deleteImg(index) {
        let deletePic = this.imgLists[index]
        this.$emit('deletePic', deletePic)
    	},
      /**
       * @description 打开相册失败，请求系统权限
       * @param {Error} e
       */
      galleryPermission(e) {
        var galleryPermission = plus.navigator.checkPermission("GALLERY");
      	if (plus.os.name == "iOS") {
      		if (e.code == 8) {
            plus.nativeUI.alert("您的相册权限未打开，请在当前应用设置-隐私-相册来开打次权限", function(event){
              plus.runtime.openURL('prefs:root=Privacy');
            })
      		}
      	} else if (plus.os.name == "Android") {
      		if (e.code != 12) {
      			plus.nativeUI.alert("您的相册权限未打开，请在应用列表中将您的权限打开", function() {
      				// var android = plus.android.importClass('com.android.settings');
      				var main = plus.android.runtimeMainActivity();
      				var Intent = plus.android.importClass("android.content.Intent");
      				var mIntent = new Intent('android.settings.APPLICATION_SETTINGS');
      				main.startActivity(mIntent);
      			});
      		}
      	}
      },
      cameraPermission() {
        var cameraPermission = plus.navigator.checkPermission("CAMERA");
        if( cameraPermission == "denied" ){// 阻塞
          if (plus.os.name == "iOS") {
            plus.nativeUI.alert("您的相机权限没有打开，请在当前应用设置-隐私-相机来开打次权限", function(event){
              plus.runtime.openURL('prefs:root=Privacy');
            })
          } else if (plus.os.name == "Android") {
            plus.nativeUI.alert("您的相机权限没有打开，请在应用列表中将权限打开", function() {
            	// var android = plus.android.importClass('com.android.settings');
            	var main = plus.android.runtimeMainActivity();
            	var Intent = plus.android.importClass("android.content.Intent");
            	var mIntent = new Intent('android.settings.APPLICATION_SETTINGS');
            	main.startActivity(mIntent);
            });
          }
          return false
        }else{
          return true
        }
      },
//       zipPicture(pth, cb) {
//         return new Promise(function(resolve, reject){
//           let conf = {
//             src: pth,
//             dst:pth,
//             overwrite:true,
//             quality: 50
//           };
//           plus.zip.compressImage(conf, function(data) {
//             resolve(data)
//           }, function(err) {
//             Toast({message:'图片压缩失败,错误编码:'+err.code})
//             reject(err);
//           });
//         })
//       },
      previewPicture(index) {
        plus.nativeUI.previewImage(this.imgLists,{current:index});
      },
      zipPicture(pth, fileInfo, zipTo) {
        return new Promise(function(resolve, reject){
          let zipName = fileInfo.name,
            quality = 0.50;
          typeof zipTo === 'number' ? zipTo>0 ? zipTo = zipTo :zipTo = 1024 : zipTo = 1024; //默认压缩到1M
          zipTo < fileInfo.size ? quality = zipTo / fileInfo.size : quality = 1;
          let conf = {
            src: pth,
            dst: '_doc/'+zipName,//pth, // 转换目标图片的路径
            overwrite:false, //true, // 是否覆盖
            quality: quality * 100 // 取值(0,100]
          };
          plus.zip.compressImage(conf, function(data) {
            resolve(data)
          }, function(err) {
            // plus.nativeUI.alert('图片压缩失败,错误编码:'+err.code)
            reject(err);
          });
        })
      },
      dataURLtoFile(dataurl, filename) {//将base64转换为文件
        //atob()- window内置的函数;ASCII码转binary ;不支持非ASCII码转换,
        //btoa()- window内置函数;binary转ASCII;不支持非ASCII码转换,
        return new Promise(function(resolve, reject){
          var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
          while(n--){
              u8arr[n] = bstr.charCodeAt(n);
          }
          var file = new File([u8arr], filename, {type:mime})
          resolve(file);
        })
      },
      getBase64(url){
        return new Promise(function(resolve, reject){
          var canvas = document.createElement('canvas'),//创建canvas元素
            dataURL= '',
            ctx = canvas.getContext('2d'),
            img = new Image; //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
          img.crossOrigin = 'Anonymous';
          img.onload = function(){
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img,0,0,);
            dataURL = canvas.toDataURL('image/jpeg', 1);
            resolve(dataURL)
            // callback?callback(dataURL):null; //调用回调函数
            canvas = null;
          };
          img.src = url; // 图片预览
        })
      },
      zipErrHandle(zipErr, fileInfo) { // 压缩失败
        let that = this;
        if(zipErr.code == -5){ // 错误编码为-5--该路径已经存在该文件;跳过压缩,直接获取原来存在的文件
          var zipRelatePath = "_doc/"+ fileInfo.name;
          plus.io.resolveLocalFileSystemURL( zipRelatePath, function(entry){
            var zipLocalURL = entry.toLocalURL()
            console.log('336:', that.imgLists, zipLocalURL, !that.imgLists.includes(zipLocalURL))
            if( !that.imgLists.includes(zipLocalURL)){
              that.getBase64(zipLocalURL) //zipLocalURL -压缩后的文件所在的'绝对路径'
              .then(function(dataURL){ //dataUrl -压缩后的文件的base64编码
                  that.dataURLtoFile(dataURL, fileInfo.name)
                  .then(function(f){ // f - base64转成文件后的文件对象
                    let fileBigObj = {
                      path: zipLocalURL,
                      file: f
                    }
                    console.log(fileBigObj);
                    that.$emit('pickPic',fileBigObj)
                    return f;
                  })
              })
            } else {
              Toast({message: '同一张图片不能重复提交'})
            }
          }, function(){

          })
        }
      }
    }
  })
</script>

<style lang="less" scoped="scoped">
  #uploadImg{
    .upload_image_box{padding: 34px;width: 100%;box-sizing: border-box;background: #fff;
      .upload_image{background: #f2f2f2;width: 100%;border: 1px dashed #e6e6e6;/*no*/border-radius: 10px;padding: 110px 0;
        .photo_box{width: 100%;
          .icon_photo{width: 44px;height: 40px;position: relative;left: 50%;margin-left: -22px;}
          p{font-size: 24px;/* px */color: #999999;text-align: center;margin: 0;}
        }
      }
    }
    .uploaded{padding: 34px;width: 100%;box-sizing: border-box;background: #fff;
      .imgItem{width: 214px;height: 214px;display: inline-block;border: 2px dashed #e5e5e5;border-radius: 20px;position: relative;vertical-align: top;margin-right: 20px;
        .delete{width: 30px;height: 30px;position: absolute;right: 0;}
        .img{width: 100%;height: 100%;border-radius: 20px;}
      }
      .imgUpload{width: 214px;height: 214px;display: inline-block;background: #f2f2f2;padding: 66px 0;box-sizing: border-box;border: 2px dashed #e5e5e5;border-radius: 20px;
        .icon_photo{width: 44px;height: 40px;position: relative;left: 50%;margin-left: -22px;}
        p{font-size: 24px;/* px */color: #999999;text-align: center;margin: 0;}
      }
    }
  }
</style>

父组件使用代码

<template>
 <upload_img :imgList='imgList' :maxPic='"6"' @pickPic='pickPic($event)' @deletePic='deletePic' :zipTo = 'zipTo'></upload_img>
</template>

<script>
 import upload_img from '../../../common/upload_img'

 export default ({
      data() {
        return {
          imgList: [],
          zipTo: 1024 // KB
        }
      },
      components: {
        upload_img
      },
      methods: {
        pickPic(rest){ /*选择照片成功后回调函数*/
          setTimeout(function(){
            Indicator.close();
          },200)
          let that = this;
          let fickedFile = rest.file; // 选中的文件对象
          rest && that.imgList.push(rest.path)
          console.log(rest);
          //... 上传图片逻辑
        },
        deletePic(rest) {
          let that = this;
          let index = that.imgList.indexOf(rest);
          that.imgList.splice(rest, 1)
        }
    }
  })
</script>