浅谈用Webpack路径压缩图片上传尺寸获取的问题


Posted in Javascript onFebruary 22, 2018

问题的起因是因为的我的图片大小大于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路径压缩图片上传尺寸获取的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
深入理解ES6中let和闭包
Feb 22 #Javascript
vue+iview+less+echarts实战项目总结
Feb 22 #Javascript
在vscode中统一vue编码风格的方法
Feb 22 #Javascript
vue webpack打包优化操作技巧
Feb 22 #Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 #Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 #Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 #Javascript
You might like
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
对python中各个response的使用说明
2020/03/28 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
车间班组长岗位职责
2013/11/13 职场文书
销售辞职报告范文
2014/01/12 职场文书
生物制药自我鉴定
2014/01/25 职场文书
材料员岗位职责
2014/03/13 职场文书
服装采购员岗位职责
2014/03/15 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
病危通知单
2015/04/17 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
关于 Python json中load和loads区别
2021/11/07 Python
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle