浅谈用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路径压缩图片上传尺寸获取的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天的项目中碰到了一个乱码问题，从JS里传URL到服务器，URL中有中文参数，服务器里读出的中文参数来的全是“？”，查了网上JS编码相关资料得以解决。2009-09-09
很多网站都涉及到输入日期选项，如果客户日期输入错误，可能导入查询不到甚至查询到错误的信息，为了更好的满足用户需求，需要对日期进行校验，下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期，需要的朋友可以参考下2015-08-08
这篇文章主要介绍了js中如何对嵌套数组进行filter过滤问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
JavaScript调试技巧之console.log()详解
对于JavaScript程序的调试，相比于alert()，使用console.log()是一种更好的方式，原因在于：alert()函数会阻断JavaScript程序的执行，从而造成副作用；而console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑2014-03-03
这篇文章主要介绍了基于JS开发微信网页录音功能的实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要介绍了javascript将数字转换整数金额大写的方法,通过自定义函数中的数组替换实现数字转换整数金额大写的功能,非常具有实用价值,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了npm qs模块使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
JavaScript快速排序(quickSort)算法的实现方法总结
快速排序的思想式 分治法,选一个基准点,然后根据大小进行分配,分配然完毕之后,对已经分配的进行递归操作,最终形成快速排序,所以递归也是快速排序思想的一个重要组成部分,本文主要给大家介绍了JavaScript实现快速排序的写法,需要的朋友可以参考下2023-11-11
有时候页面中的正文一般都加上了字体大中小控制代码，方便浏览者阅读。2010-09-09
这篇文章主要介绍了js实现黑白div块画空心的图形，画出矩形、三角形、菱形、圆形，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
最新评论