ant-design-vue 的upload組件之圖片上傳前的圖片寬高判斷

須知知識點：

• FileReader()對象
• Image()對象
• upload組件

有一個需求，需要判斷上傳的圖片的寬高，限制800*800像素大小，用的是ant-design-vue框架。

1.原生的input type="file"判斷圖片大小的方法如下：

HTML：

<input type="file" id="img">
<h1 id="h1"></h1>

JS：

img.onchange=function(e){
    // e.target.files[0]表示選取的第一個文件
    console.log(e.target.files[0]);
    // FileReader對象將文件讀取為dataURL格式
    let reader=new FileReader();
    reader.readAsDataURL(e.target.files[0]),
    // load事件在讀取操作結束的時候觸發
    reader.onload=()=>{
        const img=new Image();
        // FileReader.result返回文件的內容。只有在讀取操作完成后，此屬性才有效，返回的數據的格式取決於是使用哪種讀取方法來執行讀取操作的。
        img.src=reader.result;
        // 如果此時直接獲取img的寬高結果是0，只有當圖片加載結束以后（load）獲取才能獲取到
        img.onload=()=>{
            let w=img.width;
            let h=img.height;
            h1.innerHTML=`寬：${w}-高${h}`
        }
    }
}

 

2.ant-design-vue中使用upload組件中獲取圖片大小的方式如下：

template：

<a-upload
        accept="image/jpg,image/jpeg,image/png"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        list-type="picture-card"
        :file-list="imgList"
        @preview="handlePreview"
        @change="handleChange"
        :beforeUpload="beforeUpload"
      >
</a-upload>

 

開始在handleChange方法中判斷img文件，它傳入的是一個已經選擇文件的列表，他的內容如下：

 

如果直接用這個列表中單個元素來執行上述圖片判斷，則會報錯：

 

 

 

原生js中的input type="file"打印出來e.target.files[0]結構如下：

 

 這就是讀取失敗的原因，展開ant-design-vue中的originFileObj屬性，發現原生file的內容被放到這里了：

而且再把beforeUpload文件上傳前鈎子函數中的默認傳入的參數file打印出來發現就是原生input type="file"的內容，所以直接在beforeUpload鈎子函數中直接判斷圖片的width和height中即可。

// 上傳文件之前的鈎子
  beforeUpload(file){
    console.log("beforeUpload中：",file);
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload=()=>{
      const image=new Image();
      image.src=reader.result;
      image.onload=()=>{
        let w=image.width;
        let h=image.height;
        console.log("寬高：",w,h);
      }
    }
    return false;
  }