element-plus上传视频并生成缩略图（封面）方案

1.所需的组件：el-upload

 <el-upload class="avatar-uploader" :action="attr1" :data="{ type: 3 }" :limit="1" accept="video/mp4" tip="上传图片"
            :on-success="handleSuccess1" :on-error="handleError1" :on-preview="handlePreview1" list-type="picture-card">
            <el-icon class="avatar-uploader-icon">
              <VideoCamera />
            </el-icon>
            <template #tip>
              <div class="el-upload__tip">点击上传产品视频</div>
            </template>
          </el-upload>

注意，这里并没有预览组件，预览组件另外定义：

 <el-dialog v-model="dialogVisible1">
        <video
        :src="dialogVideoUrl"
        controls
        style="width: 736px; "
      ></video>
      </el-dialog>

然后在ts代码中定义：

const handlePreview1: UploadProps['onPreview'] = (uploadFile) => {
  dialogVideoUrl.value = BASEURL+uploadFile.response.data;
  dialogVisible1.value = true
};
const handleSuccess1 = (response, file) => {
  if (response.code == 200) {
    file.url =BASEURL+"/upload/c8ab872f-d128-489b-b351-013c569bdf8c/abc.jpg"
  }
  else {
    ElMessage.error(response.message);
  }

};
const handleError1 = (err, file, fileList) => {
  console.error('上传失败:', err, file, fileList);
};

说明：

1.在upload组件中不适用内置的预览组件，而是通过el-dialog组件来独立预览。

2.上传视频时可以在前端实现截图，也可以在后端实现截图，然后将图地址返回给前端使用，本方案为了简便，直接使用后端已经有的图片作为缩略图（封面）。

3.在handleSuccess回调函数中，设置file的url地址来显示缩略图。

4.然后在预览事件中设置视频组件的url.

本文是一个简易的示例，如有不妥之处，欢迎指出。