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);
},
});
});