el-upload压缩视频后上传

el-upload是一个基于Element UI的上传组件，它可以实现文件上传功能，但它不会对文件进行压缩。如果你想要压缩视频后再上传，你需要使用一些第三方库来实现视频压缩功能，例如FFmpeg等。在使用FFmpeg进行视频压缩后，你可以将压缩后的视频文件作为参数传递给el-upload组件进行上传。

相关问题

el-upload 压缩图片上传

el-upload组件可以通过before-upload事件对用户上传的图片文件进行压缩处理。在beforeUpload事件中，可以使用image-conversion库来进行图片压缩。具体的代码如下所示：

beforeUpload(file) {
  const imageConversion = require("image-conversion");
  console.log('压缩前：', (file.size / 1024) + "K");
  this.loading = true;
  imageConversion.compressAccurately(file, 100).then(res => {
    this.loading = false;
    console.log('压缩后：', (res.size / 1024) + "K");
    console.log(res);
  })
}

在el-upload组件中，可以通过设置action属性来指定上传的接口地址，通过设置show-file-list属性为false来隐藏文件列表。同时，可以在el-upload组件内部添加一个el-button组件作为选择图片的按钮。完整的el-upload代码如下所示：

<el-upload action="#" :show-file-list="false" :before-upload="beforeUpload" accept=".jpg,.jpeg,.png">
  <el-button size="small">选择图片</el-button>
</el-upload>

这样，当用户选择图片后，beforeUpload事件会被触发，图片会被压缩处理后再进行上传。

el-upload上传视频并压缩

el-upload 可以用于上传视频，但是它本身不具备视频压缩的功能。你需要借助其他工具来实现视频压缩功能，例如 FFmpeg、Handbrake 等。

以下是一种使用 FFmpeg 实现视频压缩的方法：

1. 安装 FFmpeg：

   # Ubuntu
   sudo apt-get install ffmpeg

   # MacOS
   brew install ffmpeg

2. 使用 FFmpeg 压缩视频：

   ffmpeg -i input.mp4 -vf scale=640:-1 -c:v libx264 -crf 28 -preset veryslow -c:a copy output.mp4

这个命令将会将 `input.mp4` 文件压缩至 640 像素宽度，并使用 H.264 编码器将视频压缩至 CRF 值为 28 的质量等级。压缩速度会非常慢，但生成的视频质量会更好。

3. 将压缩后的视频上传到服务器：

   <el-upload
     class="upload-demo"
     action="/upload"
     :before-upload="beforeUpload"
     :on-success="onSuccess"
     :on-error="onError"
     :show-file-list="false">
     <el-button size="small" type="primary">点击上传</el-button>
   </el-upload>

在 `beforeUpload` 方法中，你可以使用 `FormData` 将压缩后的视频文件添加到上传表单中：

   beforeUpload(file) {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = () => {
         const formData = new FormData();
         formData.append('file', this.dataURLtoBlob(reader.result));
         this.uploadFormData = formData;
         resolve();
       };
       reader.onerror = error => reject(error);
     });
   },
   dataURLtoBlob(dataURL) {
     const arr = dataURL.split(',');
     const mime = arr[0].match(/:(.*?);/)[1];
     const bstr = atob(arr[1]);
     let n = bstr.length;
     const u8arr = new Uint8Array(n);
     while (n--) {
       u8arr[n] = bstr.charCodeAt(n);
     }
     return new Blob([u8arr], { type: mime });
   }

4. 在服务器端处理上传的视频文件。

在服务器端，你可以使用你喜欢的编程语言处理上传的视频文件。如果你使用的是 Node.js，你可以使用 `multer` 中间件来处理上传的文件：

   const express = require('express');
   const multer = require('multer');
   const app = express();

   const storage = multer.diskStorage({
     destination: function (req, file, cb) {
       cb(null, 'uploads/')
     },
     filename: function (req, file, cb) {
       cb(null, Date.now() + '-' + file.originalname)
     }
   });

   const upload = multer({ storage: storage });

   app.post('/upload', upload.single('file'), (req, res) => {
     console.log(req.file);
     res.send('上传成功！');
   });

   app.listen(3000, () => console.log('服务器已启动！'));