https://developer.aliyun.com/mirror/npm/package/image-conversion

npm i image-conversion --save # or yarn add image-conversion
import { compress, compressAccurately } from "image-conversion";
// 要用前先引用
 
handleBefore(file) {
      /** 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。 */
      return new Promise((resolve, reject) => {
        const _URL = window.URL || window.webkitURL;
        const isLt2M = file.size / 1024 / 1024 > 2; // 判定图片大小是否小于4MB
        // 这里需要计算出图片的长宽
        const img = new Image();
        img.onload = function() {
          file.width = img.width; // 获取到width放在了file属性上
          file.height = img.height; // 获取到height放在了file属性上
          const imgwidth = img.width > 1280; // 图片宽度
          const imgheight = img.height > 1280; // 图片高度
          // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
          if (imgwidth && isLt2M && imgheight) {
            compressAccurately(file, {
              size: 2048,
              width: 1280,
              height: 1280
            }).then(res => {
              resolve(res);
            });
          }  else resolve(file);
        }; // 需要把图片赋值
        img.src = _URL.createObjectURL(file);
      });
    },
 
 
再一些的浏览器上会出现一些报错  报语法错误  解决办法
  npm install babel-polyfill

1.兼容IE9/IE10可能会遇到语法或者 Promise错误,安装 babel-polyfill

npm install babel-polyfill

2.在页面入口配置main.js中引入 babel-polyfill

import 'babel-polyfill'

3.vue.config.js页面配置 disableHostCheck: true,(最后注释掉了)

  

vue 图片优化的更多相关文章

  1. Vue图片懒加载插件

    图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...

  2. Web性能优化:图片优化

    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...

  3. Web前端性能优化之图片优化

    我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过 ...

  4. 浅谈CSS样式png、gif、jpg图片优化的方法

    一.PNG.GIF.JPG图片对比 在我们进行图像优化技术前,需要学习有关的图片格式的一些技术细节,每个图形格式都有自己的优势和拖弱点,知道他们会使你得到更好的视觉质量和压缩品质. 网页图片优化是网页 ...

  5. js/vue图片压缩

    js版 新建compressImage.js,内容如下: // 将base64转换为blob(有需要可加上,没需要可不加) function convertBase64UrlToBlob(urlDat ...

  6. Web 性能优化: 图片优化让网站大小减少 62%

    摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...

  7. VB|xp风格:终于解决了“图片优化软件”在部分xp系统上无法启动的问题。

    一年以来,图片优化软件一直存在一个“兼容”性问题. 因为之前的软件是在windows 2003系统上开发的,制作成安装文件后,经部分用户测试发现,在部分用户的xp系统上安装后,无法正常启动,只能听到p ...

  8. vue图片、背景图片路径问题

    vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo ...

  9. 前端性能优化之优化图片 && 优化显示图片

    前端图片优化一直以来都是热门话题,从需求上来看,很多站点往往是图片体积大于代码体积, 图片请求多余代码文件请求, 给前端的性能带来了很大的困扰,那么应该如何解决呢? 零. 认识图片 我们通常使用的图片 ...

随机推荐

  1. 理解Java对象:要从内存布局及底层机制说起,话说….

    前言 大家好,又见面了,今天是JVM专题的第二篇文章,在上一篇文章中我们说了Java的类和对象在JVM中的存储方式,并使用HSDB进行佐证,没有看过上一篇文章的小伙伴可以点这里:<类和对象在JV ...

  2. sqlilab less28 less28a

    less-28  less-28a 二者相差不大 单引号小括号包裹,黑名单过滤--,#,空格,union空格select(不区分大小写) less-28的黑名单 less-28a的黑名单 %a0,不被 ...

  3. 关于Redis的一些思考

    1.从Java语言考虑,已经有ConcurrentHashMap等并发集合类了,与Redis相比,区别于差异在哪? 一直有这么个疑问,今天有搜了很久,很巧,搜到个有同样想法的问答,如下: When p ...

  4. MathType总结编辑括号的类型(中)

    MathType中的符号模板多种多样,能够满足各类用户的使用需求.即使是一些不常用的符号也有相应的模板,因为在工作学习中我们都需要他们,只是有的用的多有的用的少而已,下面我们就一起来看看公式编辑器编辑 ...

  5. Guitar Pro小课堂之如何演奏刮弦

    每当我们听到吉他现场演出的时候,看到吉他手在激烈的刮弦时,都觉得很酷,非常有感染力.刮弦在我们弹吉他或编曲时,会经常用到,虽然时间很短,但会为你加分不少. 那么我们应该如何演奏刮弦呢,我们先用E5和弦 ...

  6. img元素的联用

    img元素的常用属性: src属性:资源地址 alt属性:当图片资源失效时,将出现该属性的设置的文字 最简单的联动: 和a元素联用(直接用a标签套) <a href="https:// ...

  7. 教你C 语言简单编程速成

    我们将所有的 C 语言要素放置到一份易读的备忘录上. 1972 年,丹尼斯·里奇Dennis Ritchie任职于贝尔实验室Bell Labs,在几年前,他和他的团队成员发明了 Unix .在创建了一 ...

  8. H3CNE(教程)

    培训机构提供的ppt,可能也是来自于官方提供,涉及到H3CNE认证考试中的全部知识点,学真技术还得看这个.包括帧中继,哪怕是淘汰了十多年了. https://huxiaoyao.lanzous.com ...

  9. Windows生产力工具推荐

    相信大部分同学还是Windows用户,作为一个长期Windows/MacOS双系统长期用户,Windows在用的好,工作效率也很高,下面就推荐几款Windows下面的生产力工具. utools 用过M ...

  10. CentOS下如何用nmon收集系统实时运行状况

    #赋予执行权限 chmod +x nmon 执行./nmon可以查看实时的系统状态有提示的,d看磁盘,n看网络,c看cpu #如果不想看实时的,想收集系统长时间运行情况然后分析,可用这个 nohup ...