2019-02-28 前端图片压缩

github 地址:

https://github.com/xkeshi/image-compressor


使用步骤:

1.  npm 安装

npm install image-compressor.js

2.  引入

import ImageCompressor from 'image-compressor.js' // 引入

3.  读取 

HTML

<input type="file" id="file" accept="image/*">

JS

document.getElementById('file').addEventListener('change', (e) => {  

        // 读取文件

       const file = e.target.files[0];  

      if (!file) { 

            return;     // 为空处理

         } 

        //  文件压缩

  new ImageCompressor(file, {    

    quality: .6,  //压缩百分点   -->0  文件越小

    success(result) {      

        const formData = new FormData(); // FormData学习地址 https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

      formData.append('file', result, result.name);      // 通过XMLHttpRequest服务发送压缩的图像文件-Send the compressed image file to server with XMLHttpRequest.

    //接口请求发送给后台  ***参数为FormData

        axios.post('/path/to/upload', formData).then(() => {        console.log('Upload success');

      });

作者:UYOU

链接:https://www.imooc.com/article/40038

来源:慕课网

    },

    error(e) {      

        console.log(e.message);

        },

  });

});

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom阅读 7,888评论 0 3
  • 前言 最先接触编程的知识是在大学里面,大学里面学了一些基础的知识,c语言,java语言,单片机的汇编语言等;大学毕...
    oceanfive阅读 8,451评论 0 7
  • 旋转压缩部分因为有文件的不同类型相互转换,所以方法调用比较多,看起来有点乱,但是实际不难理解,建议粘贴到编辑器比较...
    名字_d880阅读 8,543评论 0 1
  • 当天空仅剩下最后一缕夕阳 我知道你终将是要来的了 因为深知你的贪婪 窗外喧嚷的车鸣是你的 炫彩的霓虹是你的 满天的...
    谢小四阅读 1,382评论 1 2
  • 不快不慢的时间,以一个平稳的速度,静静的,又流过了一个学期。我们追随它流动的方向,却流动了几千年不止。仅仅用...
    乐__阅读 2,383评论 1 1

友情链接更多精彩内容