浅谈用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 相关文章推荐
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
微信小程序实现签字功能
Dec 23 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
微信小程序用户授权最佳实践指南
May 08 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
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
PHP7 标准库修改
2021/03/09 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
JS实现页面打印功能
2017/03/16 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
jQuery:unbind方法的使用详解
2017/08/14 jQuery
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
讲解Python中的标识运算符
2015/05/14 Python
Python中关于使用模块的基础知识
2015/05/24 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
python八皇后问题的解决方法
2018/09/27 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
python 写一个性能测试工具(一)
2020/10/24 Python
Python实现石头剪刀布游戏
2021/01/20 Python
英语系本科生个人求职信
2013/09/21 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
稽核岗位职责范本
2015/04/13 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL