el-upload 上传视频压缩

### 使用 el-upload 组件上传视频时实现压缩功能 在 Vue 和 Element UI 的开发环境中，`el-upload` 组件主要用于文件上传操作。然而，默认情况下，该组件并不提供内置的视频压缩功能。为了实现这一目标，可以借助第三方库（如 `ffmpeg.js` 或者 `video-compressor.js`），或者通过自定义逻辑来完成。 以下是基于现有技术栈的一种可能实现方式： #### 自定义 beforeUpload 方法进行视频预处理 可以通过覆盖 `beforeUpload` 钩子函数，在实际上传之前对视频文件执行压缩操作。具体步骤如下所示： 1. **引入依赖** 安装并集成适合的视频压缩工具包，例如 `video-compressor.js`。 ```bash npm install video-compressor.js --save ``` 2. **编写压缩逻辑** 在 `methods` 中创建一个用于压缩视频的方法，并将其绑定至 `beforeUpload` 属性。 ```javascript import VideoCompressor from 'video-compressor.js'; export default { data() { return { headers: {}, // 请求头配置 videoForm: { showVideoPath: '', // 显示已上传视频路径 }, videoFlag: false, videoUploadPercent: 0, // 进度条百分比 }; }, methods: { async compressAndUpload(file) { try { const compressedFile = await new Promise((resolve, reject) => { VideoCompressor.compress({ file: file.raw, // 原始文件对象 quality: 0.5, // 压缩质量设置 size: 0, // 输出尺寸限制 (单位：MB) fileName: `${file.name.split('.')[0]}_compressed.mp4`, // 新文件名 successCallback(compressedBlob) { resolve(new File([compressedBlob], compressedBlob.name, { type: 'video/mp4' })); }, errorCallback(error) { console.error('Compression failed:', error); reject(error); } }); }); // 返回经过压缩后的文件实例给后续上传流程 return compressedFile; } catch (error) { this.$message.error('视频压缩失败，请稍后再试'); throw error; } }, async beforeUploadVideo(file) { // 调用压缩方法 const compressedFile = await this.compressAndUpload(file); // 更新进度状态或其他提示信息 this.videoFlag = true; // 返回最终待上传的对象 return compressedFile; }, uploadVideoProcess(event, file, fileList) { this.videoUploadPercent = parseInt(Math.min(100, event.percent)); }, handleVideoSuccess(response, file, fileList) { this.videoFlag = false; this.videoForm.showVideoPath = URL.createObjectURL(file.raw); // 设置回显路径 } } }; ``` 3. **模板部分调整** 将上述逻辑嵌入到 HTML 模板中即可正常运行。 ```html <el-upload class="avatar-uploader" action="/api/upload-video-endpoint" <!-- 替换为目标服务器端接口 --> :data="{ FoldPath: '上传目录', SecretKey: '安全验证' }" :on-progress="uploadVideoProcess" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :show-file-list="false" :headers="headers"> <video v-if="videoForm.showVideoPath !== '' && !videoFlag" :src="videoForm.showVideoPath" class="avatar video-avatar" controls> 您的浏览器不支持视频播放 </video> <i v-else-if="videoForm.showVideoPath === '' && !videoFlag" class="el-icon-plus avatar-uploader-icon"></i> <el-progress v-if="videoFlag" type="circle" :percentage="videoUploadPercent" style="margin-top: 7px;"></el-progress> </el-upload> ``` --- ### 关键点说明 - **压缩参数控制** 可以根据项目需求动态调整压缩的质量 (`quality`)、输出大小 (`size`) 等属性[^1]。 - **错误捕获机制** 如果压缩过程中出现问题，则应停止进一步的操作并向用户提供友好的反馈消息[^2]。 - **性能优化建议** 对于较大体积的视频素材来说，前端实时压缩可能会消耗较多资源甚至卡顿界面体验；此时考虑采用分片传输策略或将任务卸载至服务端完成更为合理[^3]。 ---