验证中...
开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约
index.md
原始数据 复制代码

图片压缩上传

场景

  1. 为什么要实现图片压缩后再上传?

  2. 你可以尝试一下上传30Mb以上的图片,有可能系统出现卡死现象

实现思路

  1. 使用image-compressor.js

  2. 可以通过npm install @xkeshi/image-compressor

  3. 官方文档:https://www.npmjs.com/package/@xkeshi/image-compressor

  4. 中文: https://www.imooc.com/article/40038

实现代码

  1. image-compressor.js的用法
import ImageCompressor from "@xkeshi/image-compressor";
/**
  * 对图片进行压缩,如果图片小于200kb直接上传,如果大于等于200则压缩后再上传
  * 如果图片过大压缩图片{https://www.imooc.com/article/40038}
  */
let maxSize = 300 * 1024; //显示图片最大为300k
let dataURI = file.content; 
let imgSize = file.length;  //获取当前图片的大小
if (imgSize > maxSize) {
  let radio = maxSize / imgSize; //设置压缩率
  new ImageCompressor(file.file, {
    quality: radio,                // 输出图像的画质,类型是 number。默认值是 undefined。值是0到1之间的数字。
    convertSize: 1000000,          // 输出图像的文件类型,类型是 number。默认值是 5000000 (5MB)。
    success(newFile) {
      // 注意:result: 压缩后的图像(一个Blob对象)。
      console.log('执行一些上传操作')
    }
  });
  return;
}

let iconWidth = 400;
//压缩图片处理(针对小图片显示压缩,根据自己的情况选择适合方案)
new ImageCompressor(file.file, {
  width: iconWidth,     //图片宽
  quality: 1,
  success(newFile) {
    //将压缩后的图像(一个Blob对象)。转化成bas64
    let file = new FileReader();
    file.readAsDataURL(newFile);
    file.onload = e => {
      console.log(e.target.result)
    };
  }
});

附加

  1. 对于图片上传的问题难免会遇到图片之间的转化
/**
  * base64转文件流
  * @param {base64} //base64数据
  * @param {string} //format格式
  * @return {file}  文件blob
  */
convertBase64UrlToBlob(base64, mimeType) {
  let bytes = window.atob(base64.split(",")[1]);
  let ab = new ArrayBuffer(bytes.length);
  let ia = new Uint8Array(ab);
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  let _blob = new Blob([ab], { type: mimeType });
  return _blob;
}

// blob-->base64
let file = new FileReader();
  file.readAsDataURL(newFile);
  file.onload =  (e)=>  {
    that.getAlloyCrop(e.target.result);
  };

//上传图片类型

// 将base64文件转换为bolb文件
let formData = new FormData();
let blob = convertBase64UrlToBlob(base64, "image/png");
formData.append("file", blob, Date.now() + ".png");
//在此处发送一个ajax请求
let config = {
  headers: { "Content-Type": "multipart/form-data" }
};

后记

  1. 重要的事情说三遍 (所有原理都是互通的*3)

  2. 了解思路很重要,后面探索靠自己 谢谢!!!

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助