封裝組件el-upload通過v-model (一): 上傳單張圖片

ElementUI 中的el-upload 上傳圖片 我進行了二次封裝。(默認大家都是有一定的vue基礎的，細節就不過多的講了)

在項目中我們主要拿到圖片或者其他的一些參數 ，我這里是上傳后返回的Guid， 

所以上傳的動作我就集中處理了，像 input 的 v-model 直接獲取到參數

頁面展示代碼：

   <imgeFile v-model="form.license" allclass="passport-uploader"
                  inclass="passport-uploader-icon passport-s3" onclass="passport passport-pic">
                     <div class="el-upload__tip" slot="tip">請上傳300*420像素不超過500K大小的圖片,圖片格式支持.PNG或.JPG</div>
   </imgeFile>

效果：

 

組件代碼：

<template>
  <el-upload :class="allclass" :accept="accept" :action="fileUrl" :show-file-list="false"
    :on-success="handlePassportSuccess" :before-upload="beforePassportUpload">
    <!---上傳圖片后的展示效果  imge是進行封裝過的 imageUrl是Guid 統一處理--->
    <imge v-if="imageUrl"   :src="imageUrl" :class="onclass"/>
   <!---上傳圖片前的展示效果--->
    <i v-else :class="inclass"></i>
      <!---提示--->
     <slot name="tip" slot="tip"></slot>
  </el-upload>
</template>

<script>

  import {  Url,  CCONFIG} from "@/api/apiconfig";//上傳圖片地址
  import {getFileUrl} from "@/api/upload"; //獲取圖片方法
  export default {
      model:{
      prop:"value",
  },
    props: {
     //配合v-model 加載初始值
       value: {
        type: String,
        default: ""
       },
       //大於多少兆開始壓縮
       sizeKB:{
        type:Number,
        default: 100
       },
       //最大多少兆
       maxSizeM:{
        type:Number,
        default: 5
       },
       //圖片同比壓縮比列
       scale:{
        type:Number,
        default: 0.3
       },
      //上傳文件類型
      accept:{
        type: String,
        default: "image/jpeg,image/png"
      },

      //整體樣式
      allclass: {
        type: String,
        default: "passport-uploader-logo"
      },
      //點擊前樣式
      inclass: {
        type: String,
        default: "el-icon-plus avatar-uploader-icon"
      },
      //點擊后樣式
      onclass: {
        type: String,
        default: "passport-logo"
      },

    },
    data() {
      return {
        fileUrl: Url.imge_Upload,//上傳服務器地址
        imageUrl: "",
        filelist:[],
      };
    },

   //監聽父組件值是否在變化

      watch: {

         //有些頁面初始初始src沒有賦值

        value(newValue, oldValue){

              this.imageUrl= newValue;

           },

      },

    computed: {},
    created: function () {
         this.imageUrl=this.value
    },
     mounted() {
     },
    methods: {
      //上傳成功返回值
      handlePassportSuccess(res, file) {
        if (res.code == "0000") {
            this.imageUrl=res.data.id;
          //返回 v-model的參數（關鍵）
          this.$emit('input', res.data.id) 
        } else
          this.imageUrl = "";
      },

    //壓縮圖片 下面的代碼都是壓縮文件大小 
   beforePassportUpload(file) {
      var that = this;
      return new Promise((resolve, reject) => {
        const isJPG = file.type === "image/jpeg";
        const isPNG = file.type === "image/png";
        const  kb= file.size/ 1024;
        const sizeM= file.size/ 1024/1024;
        const isLtKB = kb  < this.sizeKB;
        let bool = false;
        let msg = "";
        if ((isJPG || isPNG)&&sizeM<=this.maxSizeM) {//判斷是否符合格式要求
          bool = true;
        } 
        else 
        if(sizeM>this.maxSizeM){
           var mag="上傳文件必須是小於"+this.maxSizeM+"M";
            this.$message({message:mag,type:'error',offset:10 });
            reject(file);
        } else 
        {
          this.$message({message:"上傳文件必須是jpg、png格式!",type:'error',offset:10 });
           reject(file);
        }
        if (bool && !isLtKB) {//如果格式符合要求，但是size過大，對圖片進行處理
          let image = new Image(),
          resultBlob = "";
          image.src = URL.createObjectURL(file);
          image.onload = () => {
            resultBlob = that.compressUpload(image);//Blob
            resolve(resultBlob);
          };
        } else if (bool && isLtKB) {
          resolve(file);//file
        }
      });
    },
    compressUpload(image) {
      let canvas = document.createElement("canvas");//創建畫布元素
      let ctx = canvas.getContext("2d");
      let initSize = image.src.length;
      let { width } = image,
          { height } = image;
      canvas.width = width;
      canvas.height = height;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(image, 0, 0, width, height);
      let compressData = canvas.toDataURL("image/jpeg", this.scale); //等比壓縮
      let blobImg = this.dataURItoBlob(compressData);//base64轉Blob
      return blobImg;
    },
    dataURItoBlob(data) {
      let byteString;
      if (data.split(",")[0].indexOf("base64") >= 0) {
        byteString = atob(data.split(",")[1]);//轉二進制
      } else {
        byteString = unescape(data.split(",")[1]);
      }
      let mimeString = data
        .split(",")[0]
        .split(":")[1]
        .split(";")[0];
      let ia = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i += 1) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], { type: mimeString });
    },
   
   
   },
  
  };
</script>

 QQ交流群:929412850 希望大家一起能夠探討學習   轉發請加上原文鏈接