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

v-model 上傳多張圖片 主要是在 重新刷新圖片列表 

Vue 效果

 

 

 

file-list 獲取圖片列表   注意:標紅線的地方是重點 其他和單張上傳沒區別

<template>  
<div>
  <el-upload
  :action="fileUrl"
  :accept="accept"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :on-success="handlePassportSuccess"
  :limit="limit"
  :on-exceed="errortip" :file-list="imgeData"
  :before-upload="beforePassportUpload"
  >
  <i class="el-icon-plus"></i>
    <slot name="tip" slot="tip"></slot>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</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"
      },
      //上傳個數現在
      limit:{
          type: Number,
          default:3
       },
       msg:{
        type: String,
        default: ""
      },


    },
  data() {
    return {
      fileUrl:Url.imge_Upload,
      imageUrl: "",
      dialogImageUrl: '',
      dialogVisible: false,
      imgeData:[],//圖片列表
      imgeIdData:[],//返回圖片Id列表
    };
  },

 
          
              created: function () { 
           
          
               
             this.loadImg(this.value) 
           
          
                }, 
           
          
 
          
               
             //監聽父組件值是否在變化 
           
          
                watch: { 
           
          
                  
            //有些頁面初始初始src沒有賦值 
           
          
                  value(newValue, oldValue) { 
           
          
                   
           this.loadImg(newValue) 
           
          
                  }, 
           
          
                }, 
           
          
                mounted() {}, 
           
          
                methods: { 
           
          
               
           
          
             loadImg(value){ 
           
          
              
            //獲取圖片列表 
           
          
                    var arr = value.split(";"); 
           
          
                    var data = []; 
           
          
                    for (let i = 0; i < arr.length; i++) { 
           
          
                      if (arr[i]) 
           
          
                        data.push({ 
           
          
                          imgeId: arr[i], 
           
          
                          url: getFileUrl(arr[i]), 
           
          
                        }) 
           
          
                    } 
           
          
                    this.imgeData = data; 
           
          
             }, 
           
         

//刪除回調
      handleRemove(file, fileList) {
           this.imgeData=fileList;//更新圖片列
  
           this.returnimgs();

 }, //點擊回調
 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, //上傳成功返回值
 handlePassportSuccess(res, file) { if (res.code == "0000") { var data={ uid:file.uid, imgeId:res.data.id, url:getFileUrl(res.data.id) } this.imgeData.push(data);//上傳成功需要更新圖片列表 this.returnimgs() }; }, //上傳多少張
 errortip(){ var  message=""; if(this.msg==""){ message=`最多上傳${this.limit}張圖片` } this.$message({message:message,type:'error',offset:10 }); }, returnimgs(){ this.imgeIdData=[]; for (var i = 0; i < this.imgeData.length; i++) { this.imgeIdData.push(this.imgeData[i].imgeId) } this.$emit('input', this.imgeIdData.join(';')) }, //壓縮圖片 下面的代碼都是壓縮文件大小 
 beforePassportUpload(file) { 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 }); return reject(file); } else { this.$message({message:"上傳文件必須是jpg、png格式!",type:'error',offset:10 }); return reject(file); } if (bool && !isLtKB) {//如果格式符合要求，但是size過大，對圖片進行處理
          let image = new Image(), resultBlob = ""; image.src = URL.createObjectURL(file); image.onload = () => { resultBlob = this.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>