浅谈用Webpack路径压缩图片上传尺寸获取的问题
更新时间：2018年02月22日 09:20:57 作者：华灯_初上
下面小编就为大家分享一篇浅谈用Webpack路径压缩图片上传尺寸获取的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
问题的起因是因为的我的图片大小大于url-loader 的尺寸标准,导致webpack自动将图片的路径做了压缩处理,直接导致了我在获取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来取出关于路径base64编码之后的结果。算是一个小小的坑。这里做一个笔记方便日观看。
以上这篇浅谈用Webpack路径压缩图片上传尺寸获取的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了webpack HappyPack实战详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了JavaScript进制数之间的互相转换，进制转换是人们利用符号来计数的方法，下文基于JavaScript实现进制数之间的转换，有一定的知识性参考价值，需要的小伙伴可以参考一下2022-05-05
JS刷新框架想必大家们都有所了解，如何是刷新框架外页面想必大家有所陌生啦,没关系本文的出现将解决大家的燃眉之急，感兴趣的你可不要错过了哈2013-02-02
这篇文章主要为大家介绍了ts封装axios最佳实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了分享几个JavaScript运算符的使用技巧，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了微信小程序提取公用函数到util.js及使用方法,结合实例形式分析了util.js公用函数相关调用操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了JavaScript检测弹出窗口是否已经关闭的方法,涉及javascript中window属性的closed属性的使用技巧,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了js实现百度联盟中一款不错的图片切换效果的方法,以完整实例形式分析了javascript操作图片切换的技巧,需要的朋友可以参考下2015-03-03
随便打开一个网页，基本上都会看到无缝滚动或者轮播图，比如淘宝还有360官网的首页。那么这些滚动效果是怎么实现的呢？下面小编给大家分享关于网页中的无缝滚动的js代码，感兴趣的朋友一起看下吧2016-06-06
用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。2010-02-02
最新评论