淺談?dòng)肳ebpack路徑壓縮圖片上傳尺寸獲取的問題
更新時(shí)間：2018年02月22日 09:20:57 作者：華燈_初上
下面小編就為大家分享一篇淺談?dòng)肳ebpack路徑壓縮圖片上傳尺寸獲取的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
問題的起因是因?yàn)榈奈业膱D片大小大于url-loader 的尺寸標(biāo)準(zhǔn),導(dǎo)致webpack自動(dòng)將圖片的路徑做了壓縮處理,直接導(dǎo)致了我在獲取dom的value的時(shí)候無法正確的獲取到圖片的正確路徑。
直接上解決的方法。
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('', '圖片尺寸有誤,請(qǐng)重新上傳', '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é)果。算是一個(gè)小小的坑。這里做一個(gè)筆記方便日觀看。
以上這篇淺談?dòng)肳ebpack路徑壓縮圖片上傳尺寸獲取的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天的項(xiàng)目中碰到了一個(gè)亂碼問題，從JS里傳URL到服務(wù)器，URL中有中文參數(shù)，服務(wù)器里讀出的中文參數(shù)來的全是“？”，查了網(wǎng)上JS編碼相關(guān)資料得以解決。2009-09-09
js中如何對(duì)嵌套數(shù)組進(jìn)行filter過濾
這篇文章主要介紹了js中如何對(duì)嵌套數(shù)組進(jìn)行filter過濾問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
JavaScript調(diào)試技巧之console.log()詳解
對(duì)于JavaScript程序的調(diào)試，相比于alert()，使用console.log()是一種更好的方式，原因在于：alert()函數(shù)會(huì)阻斷JavaScript程序的執(zhí)行，從而造成副作用；而console.log()僅在控制臺(tái)中打印相關(guān)信息，因此不會(huì)造成類似的顧慮2014-03-03
基于JS開發(fā)微信網(wǎng)頁(yè)錄音功能的實(shí)例代碼
這篇文章主要介紹了基于JS開發(fā)微信網(wǎng)頁(yè)錄音功能的實(shí)例代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫的方法
這篇文章主要介紹了javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫的方法,通過自定義函數(shù)中的數(shù)組替換實(shí)現(xiàn)數(shù)字轉(zhuǎn)換整數(shù)金額大寫的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了npm qs模塊使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
JavaScript快速排序(quickSort)算法的實(shí)現(xiàn)方法總結(jié)
快速排序的思想式 分治法,選一個(gè)基準(zhǔn)點(diǎn),然后根據(jù)大小進(jìn)行分配,分配然完畢之后,對(duì)已經(jīng)分配的進(jìn)行遞歸操作,最終形成快速排序,所以遞歸也是快速排序思想的一個(gè)重要組成部分,本文主要給大家介紹了JavaScript實(shí)現(xiàn)快速排序的寫法,需要的朋友可以參考下2023-11-11
javascript 大中小字體顯示實(shí)現(xiàn)代碼
有時(shí)候頁(yè)面中的正文一般都加上了字體大中小控制代碼，方便瀏覽者閱讀。2010-09-09
這篇文章主要介紹了js實(shí)現(xiàn)黑白div塊畫空心的圖形，畫出矩形、三角形、菱形、圓形，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12