前端图片上传前压缩处理

通过减小宽高、大小等方式来达到压缩图片，图片压缩后dpi会改变
通过:before-upload来拦截图片上传，压缩完后再返回Promise，继续上传

IE不支持的写法：

// 转成file对象
const _files = new FormData();
_files.append("file", res, res.name);
const resFiles = _files.get("file");//ie不支持.get方法

// ie不支持new File写法
const file = new File([u8arr], fileName, {
  type: type,
});

Promise

页面代码

<el-upload
            style="text-align: center"
            list-type="picture-card"
            class="upload-demo"
            accept=".png,.jpg"
            :action="uploadFile.action"
            :before-upload="beforeUpload"
            :multiple="false"
            :file-list="item.fileList"
          >
            <div class="uploadBox">
              <i class="el-icon-plus"></i>
            </div>
          </el-upload>

1.通过Compressor插件

地址：插件文档
下载插件

npm i compressorjs --save

使用

import Compressor from 'compressorjs'

beforeUpload(file) {
      console.log(file,22221111);
      return new Promise((resolve) => {
          new Compressor(file, {
            quality: 0.3,//推荐为0.6，
            success(result) {
              //result为 Blob格式数据
              console.log(result,1212);
              resolve(result);
              //将Blob数据转成base64格式
        	//const reader = new FileReader();
        	//reader.readAsDataURL(result);
        	//reader.onload = () => {
        		//console.log(reader.result,1111);
        	//};
            },
            error(err) {
              console.log(err.message);
            },
          });
        });
    },

2.通过canvas

compressImg.js文件

// 将base64转file
function base64ToFile(base64, fileName) {
  // 将base64将前缀与后续内容分隔开
  let data = base64.split(",");
  // 获取图片的类型（image/png、image/jpeg、image/webp等）
  let type = data[0].match(/:(.*?);/)[1];
  // 使用atob()对base64数据进行解码，结果是一个文件数据流 以字符串的格式输出
  const bstr = window.atob(data[1]);
  // 获取解码结果字符串的长度
  let n = bstr.length;
  // 根据解码结果字符串的长度创建一个等长的整形数字数组
  // 所有元素初始值均为 0
  const u8arr = new Uint8Array(n);
  // 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元
  while (n--) {
    // charCodeAt()：获取给定索引处字符对应的 UTF-16 代码单元
    u8arr[n] = bstr.charCodeAt(n);
  }
  // 创建File文件对象
  const file = new File([u8arr], fileName, {
    type: type,
  });
  return file;
}
//压缩图片处理
export function compressImg(file) {
  let files;
  let fileSize = file.size / 1024;
  let read = new FileReader();
  read.readAsDataURL(file);
  return new Promise(function(resolve, reject) {
    read.onload = function(e) {
      let img = new Image();
      img.src = e.target.result;
      img.onload = function() {
        //生成canvas
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        let base64;
        // 创建属性节点
        canvas.setAttribute("width", img.width);
        canvas.setAttribute("height", img.height);
        ctx.drawImage(img, 0, 0, img.width, img.height);
        //如果图片小于500kb，压缩到原始的0.5
        // canvas.toDataURL返回的是base64格式
        if (fileSize < 500) {
          base64 = canvas.toDataURL(file["type"], 0.5);
        } else {
          //如果图片超过500kb 压缩到原始的0.2
          base64 = canvas.toDataURL(file["type"], 0.2);
        }
        // base64获取file对象
        files = base64ToFile(base64, file.name); //如果后台接收类型为base64的话这一步可以省略
        resolve(files);
      };
    };
  });
}

import { compressImg } from "../util/compressImg";

beforeUpload(file) {
      	console.log(file,22221111)
       return new Promise((resolve) => {
         compressImg(file).then((res) => {
           console.log(res,123123);
           resolve(res);
         });
       });
    },

3.通过image-conversion插件

下载插件

npm i image-conversion --save

使用

import * as imageConversion from 'image-conversion'

beforeUpload(file) {
      	console.log(file,22221111)
       return new Promise((resolve) => {
          imageConversion
            .compressAccurately(file, 100)//设置为100kb左右
            .then((res) => {
              // res为Blob格式
              console.log(res,111122);
              //保留原始文件名
              let files = new File([res], file.name, { type: file.type });
              console.log(files);
              resolve(files);
            });
        });
    },