el-upload上传图片大于5m自动压缩
时间: 2025-01-17 22:20:37 浏览: 106
### 使用 `el-upload` 组件实现图片上传时自动压缩
为了确保上传的图片不超过指定大小,在前端可以利用 JavaScript 库如 `compressorjs` 或者 `image-conversion` 来处理图像压缩逻辑。下面介绍一种基于 Vue 和 Element UI 的解决方案,该方案可以在图片尺寸超出设定阈值时对其进行压缩。
#### 安装依赖库
首先安装所需的 npm 包:
```bash
npm install compressorjs --save
```
#### 创建上传组件并集成压缩功能
在创建上传组件的过程中引入 Compressor.js 并编写相应的钩子函数用于拦截文件上传前的操作:
```javascript
import { ElMessage } from 'element-plus';
import Compressor from 'compressorjs';
export default {
methods: {
handleBeforeUpload(file) {
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
new Compressor(file, {
quality: 0.6,
success(resultFile) {
// 替换原始文件对象为经过压缩后的 Blob 对象
resultFile.uid = file.uid; // 确保 uid 一致以便 element-ui 正常工作
this.$refs.upload.submit(); // 提交修改过的文件给服务器
},
error(err) {
console.log(err.message);
}
});
return false; // 阻止默认行为即阻止大文件直接提交至服务端
}
return true;
}
}
}
```
注意上述代码中的 `this.$refs.upload.submit()` 是假设你已经在模板里通过 ref 属性绑定了 upload 实例[^1]。
此段代码实现了如下功能:
- 当检测到待上传文件大于等于5MB时触发压缩流程;
- 利用 CompressorJS 进行无损压缩并将结果替换回原来的 File 对象;
- 如果压缩成功,则继续执行上传操作;反之给出提示信息取消本次请求。
此外还需要调整 HTML 结构以适应新的业务需求:
```html
<template>
<div class="upload-demo">
<!-- 添加 :before-upload 方法 -->
<el-upload
action="#"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:before-upload="handleBeforeUpload"
ref="upload"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
// ... 上述 JS 代码 ...
</script>
```
这样就完成了一个简单的图片上传控件,并且能够在图片体积过大时自动尝试缩小其分辨率从而满足传输条件的要求。
阅读全文
相关推荐


















