vue图片压缩compressor.js

像我们写vue项目的时候上传图片经常会遇到上传图片需要压缩传给后台，以免图片过大导致服务器内存崩溃。现在有一个很好的基于vue的图片压缩插件，话不多说，上代码

首先先安装

npm install image-compressor.js 

然后再到需要用到的vue组件中引入

import ImageCompressor from 'image-compressor.js'

组件中的代码示例

<input type="file" multiple="multiple" id="file3" v-on:change="load($event)" ref="file1" />

load(e){

var token = localStorage.getItem('token')

var that = this;

const file = e.target.files[0]; // file对象

if (!file) { return } // 为空处理

  new ImageCompressor(file, {

    quality: .6,//图片压缩的质量，可改

    success(result) {

    console.log(result)

      const formData = new FormData(); 

      formData.append('userImg', result, result.name);//压缩后的文件会自动转换成二进制文件流类型

     var obj = {

               data: formData,

               isQs: true

           }

  通过XMLHttpRequest服务发送压缩的图像文件-Send the compressed image file to server with XMLHttpRequest.

     that.$axios.post(that.$api.getUser, obj,{

              headers:{

               'token':token

              }

       }).then(res=>{

           });

    },

    error(e) {

      console.log(e.message);

    },

  });

},