淺談用Webpack路徑壓縮圖片上傳尺寸獲取的問題

更新時間：2018年02月22日 09:20:57 作者：華燈_初上

下面小編就為大家分享一篇淺談用Webpack路徑壓縮圖片上傳尺寸獲取的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

問題的起因是因為的我的圖片大小大于url-loader 的尺寸標(biāo)準(zhǔn),導(dǎo)致webpack自動將圖片的路徑做了壓縮處理,直接導(dǎo)致了我在獲取dom的value的時候無法正確的獲取到圖片的正確路徑。

直接上解決的方法。

picUpload(e) {
   let image = new Image();
   const reader = new FileReader();
   const $img = e.target.files[0];
   const formData = new FormData();
   formData.append('pic', $img);
   reader.onload = (e) => {
    const src = e.target.result;
    image.src = src;
    if (image.width !== 750 && image.height !== 1334) {
     this.showModal('', '圖片尺寸有誤,請重新上傳', 'warning', true, false);
    } else {
     if ($img.size > (300 * 1024)) {
      this.showModal('', '圖片大小不能超過300k', 'warning', true, false);
      this.setParams('pic', '');
     } else {
      this.$set(this, 'IMGNAME', $img.name);
      this.setParams('pic', formData);
     }
    }
   }
   if (e.target.files && e.target.files[0]) {
    reader.readAsDataURL(e.target.files[0]);
   }
  },

這邊給image 的src所賦值是用base64編碼之后的圖片路徑。所以要通過readAsDataURL來取出關(guān)于路徑base64編碼之后的結(jié)果。算是一個小小的坑。這里做一個筆記方便日觀看。

以上這篇淺談用Webpack路徑壓縮圖片上傳尺寸獲取的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS URL傳中文參數(shù)引發(fā)的亂碼問題
今天的項目中碰到了一個亂碼問題，從JS里傳URL到服務(wù)器，URL中有中文參數(shù)，服務(wù)器里讀出的中文參數(shù)來的全是“？”，查了網(wǎng)上JS編碼相關(guān)資料得以解決。
2009-09-09
很多網(wǎng)站都涉及到輸入日期選項，如果客戶日期輸入錯誤，可能導(dǎo)入查詢不到甚至查詢到錯誤的信息，為了更好的滿足用戶需求，需要對日期進(jìn)行校驗，下面給大家介紹使用純javascript如何判斷查詢?nèi)掌谑欠駷橛行掌?，需要的朋友可以參考?/div> 2015-08-08

js中如何對嵌套數(shù)組進(jìn)行filter過濾
這篇文章主要介紹了js中如何對嵌套數(shù)組進(jìn)行filter過濾問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
JavaScript調(diào)試技巧之console.log()詳解
對于JavaScript程序的調(diào)試，相比于alert()，使用console.log()是一種更好的方式，原因在于：alert()函數(shù)會阻斷JavaScript程序的執(zhí)行，從而造成副作用；而console.log()僅在控制臺中打印相關(guān)信息，因此不會造成類似的顧慮
2014-03-03
基于JS開發(fā)微信網(wǎng)頁錄音功能的實例代碼
這篇文章主要介紹了基于JS開發(fā)微信網(wǎng)頁錄音功能的實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫的方法
這篇文章主要介紹了javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫的方法,通過自定義函數(shù)中的數(shù)組替換實現(xiàn)數(shù)字轉(zhuǎn)換整數(shù)金額大寫的功能,非常具有實用價值,需要的朋友可以參考下
2015-01-01
npm qs模塊使用詳解
這篇文章主要介紹了npm qs模塊使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
JavaScript快速排序(quickSort)算法的實現(xiàn)方法總結(jié)
快速排序的思想式分治法,選一個基準(zhǔn)點,然后根據(jù)大小進(jìn)行分配,分配然完畢之后,對已經(jīng)分配的進(jìn)行遞歸操作,最終形成快速排序,所以遞歸也是快速排序思想的一個重要組成部分,本文主要給大家介紹了JavaScript實現(xiàn)快速排序的寫法,需要的朋友可以參考下
2023-11-11
javascript 大中小字體顯示實現(xiàn)代碼
有時候頁面中的正文一般都加上了字體大中小控制代碼，方便瀏覽者閱讀。
2010-09-09
js實現(xiàn)黑白div塊畫空心的圖形
這篇文章主要介紹了js實現(xiàn)黑白div塊畫空心的圖形，畫出矩形、三角形、菱形、圓形，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12