建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
怎么限制Webpack壓縮圖片的大小-創(chuàng)新互聯(lián)
這篇文章主要介紹怎么限制Webpack壓縮圖片的大小，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
問題的起因是因?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è)筆記方便日觀看。
以上是“怎么限制Webpack壓縮圖片的大小”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享題目：怎么限制Webpack壓縮圖片的大小-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://www.dlmjj.cn/article/ejsis.html
