浅谈用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路径压缩图片上传尺寸获取的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈如何使用 webpack 优化资源

    浅谈如何使用 webpack 优化资源

    前言 在前端应用的优化中,对加载资源的大小控制极其的重要,大多数时候我们能做的是在打包编译的过程对资源进行大小控制.拆分与复用. 本片文章中主要是基于 webpack 打包,以 React.vue 等生态开发的单页面应用来举例说明如何从 webpack 打包的层面去处理资源以及缓存,其中主要我们需要做的是对 webpack 进行配置的优化,同时涉及少量的业务代码的更改. 同时对打包资源的分析可以使用 (webpack-contrib/webpack-bundle-analyzer) 插件,当然可

  • webpack踩坑之路图片的路径与打包

    webpack踩坑之路图片的路径与打包

    刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我们就来分析下在webpack项目中图片的应用场景. 在实际生产中有以下几种图片的引用方式: 1. HTML文件中img标签的src属性引用或者内嵌样式引用 <img src="photo.jpg" /> <div style="background:url(photo.jpg)"></div

  • 深入理解Webpack 中路径的配置

    深入理解Webpack 中路径的配置

    前言 Webpack2 中有很多涉及路径参数配置,若不知其所以然,很容易混淆出错.本文尽可能的汇集了 Webpack2 中涉及路径的配置,力争深入浅出. context context 是 webpack 编译时的基础目录,入口起点(entry)会相对于此目录查找. 默认值为当前目录,webpack设置 context 默认值代码 可以本地下载: this.set("context", process.cwd()); process.cwd()即webpack运行所在的目录(等同pac

  • 浅谈用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(); formDa

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • iOS实现压缩图片上传功能

    本文实例为大家分享了iOS实现压缩图片上传功能,供大家参考,具体内容如下 #pragma mark - 打开相机 -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{ UIImage *image = info[UIImagePickerControllerOriginalImage]; s

  • 浅谈struts1 & jquery form 文件异步上传

    1.概述 还在用struts1?是的,在地球的没写地方,落后的生产方式还在运转(老项目). 从 继承org.apache.struts.action.Action, 继承org.apache.struts.action.ActionForm开始吧 2. 代码 2.1 html页面 <html> <head> <title>网页上传</title> </head> <body> <center> <h1>本地文件

  • 通过js实现压缩图片上传功能

    大概的流程就是 点击file选择图片 js将图片解读出base64编码,然后通过js将base64编码转为压缩后的base64 然后通过ajax或者form把压缩后的base64编码提交到服务器(php) 然后php将base64写入文件 html <!-- 首先引入jquery!!!!!!这里没有引入 --> <img src="/Uploads/verifyinfo/cardz.png" style="width: 100%;height: 100%;&

  • 移动端利用H5实现压缩图片上传功能

    此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能,最近有了点空闲时间,所以就实践了一下.demo效果链接在文章底部贴出. 在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法. 目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的 实现.根据查看caniuse,本demo里使用到的FileRea

  • Vue 图片压缩并上传至服务器功能

    本文主要讲解基于 Vue + Vant ,实现移动端图片选择,并用 Canvas 压缩图片,最后上传至服务器.还会封装一个工具类,方便直接调用. 一.工具类封装 废话不多说先上代码,封装一个 CompressImageUtils 工具类: ** * 图片压缩工具类 * 最大高度和最大宽度都为 500,如果超出大小将等比例缩放. * * 注意可能出现压缩后比原图更大的情况,在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器. */ // 将base64转换为blob export fun

  • Java实现将图片上传到webapp路径下 路径获取方式

    目录 将图片上传到webapp路径下 路径获取方式 spring java 获取webapp下文件路径 将图片上传到webapp路径下 路径获取方式 此方法获取到工程webapp文件夹下 String contexPath= request.getSession().getServletContext().getRealPath("/"): 获取IP地址端口号以及项目名称 <% String path = request.getContextPath(); String base

  • django mysql数据库及图片上传接口详解

    django mysql数据库及图片上传接口详解

    前言 我们在 django-rest-framework解析请求参数 文章中完成了接口文档到参数解析, 一个完整的流程中还缺少对数据库的操作. 本篇内容为django连接数据库, 并编写一个image表用来存储图片路径, 编写图片上传接口和查看数据库中所有图片路径的接口. 前期准备 django操作图片需要安装一个三方库叫做,Pillow workon python35 pip install pillow pip install pymysql Pillow这个库可以对图片进行操作, 例如生成

  • SpringMVC框架实现图片上传与下载

    SpringMVC框架实现图片上传与下载

    本文实例为大家分享了SpringMVC框架实现图片上传与下载的具体代码,供大家参考,具体内容如下 1.新建一个Maven webapp项目,引入需要用的夹包,pom.xml文件的依赖包如下: <dependencies> <!-- 用于生成图片的缩略图 --> <dependency> <groupId>net.coobird</groupId> <artifactId>thumbnailator</artifactId>

随机推荐