el-upload 显示视频_el-upload 上传视频

在使用 Element UI 的 el-upload 组件实现上传视频文件并进行回显时，关键在于正确处理上传后的视频文件链接，以及在前端以适当的方式展示视频。以下是一个简化的步骤说明：

1. 配置 el-upload 组件

确保 el-upload 组件允许上传视频文件类型，并设置相应的属性。例如，允许上传 .mp4 和 .avi 文件：

<el-upload
  action="your_upload_endpoint_url"
  :accept="'.mp4, .avi'"
  :on-success="handleVideoUploadSuccess"
  :on-remove="handleRemoveVideo"
>
  <el-button type="primary">点击上传视频</el-button>
</el-upload>
1
2
3
4
5
6
7
8

这里，action 属性指定了服务器端接收上传请求的URL，accept 属性限制了可接受的文件类型，on-success 和 on-remove 分别用于处理上传成功和删除视频时的回调。

2. 处理上传成功回调

在 Vue 组件的方法中编写 handleVideoUploadSuccess 函数，该函数通常会接收到服务器返回的视频文件存储路径或URL。保存这个信息以便回显：

methods: {
  handleVideoUploadSuccess(response, file) {
    // 假设服务器返回的数据结构如下：
    // { success: true, data: { videoUrl: 'https://example.com/video.mp4' } }
    const videoUrl = response.data.videoUrl;

    // 将视频URL保存到组件状态中，以便后续回显
    this.videoUrl = videoUrl;
  },

  handleRemoveVideo(file, fileList) {
    // 清空回显的视频URL
    this.videoUrl = null;
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. 回显已上传的视频

为了在页面上显示已上传的视频，可以使用 HTML5 的 <video> 标签。根据需要，可以将其放在 el-upload 组件附近，绑定到组件状态中的 videoUrl：

<template v-if="videoUrl">
  <video :src="videoUrl" controls width="320" height="240"></video>
</template>
1
2
3

这里，v-if="videoUrl" 确保只有当有有效的视频URL时才渲染视频元素。controls 属性为视频添加播放/暂停、音量控制等默认控件，宽度和高度可以根据实际需求调整。

4. （可选）预览本地上传的视频

如果希望在用户选择视频文件后立即预览本地视频，可以使用 before-upload 属性结合 FileReader API 实现：

<el-upload
  ...
  :before-upload="beforeUploadVideo"
>
  ...
</el-upload>

<script>
export default {
  methods: {
    beforeUploadVideo(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
      });
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

然后在 el-upload 内添加一个 v-show 控制的 <video> 元素，用以预览本地视频：

<video
  v-show="localPreviewUrl"
  :src="localPreviewUrl"
  controls
  width="320"
  height="240"
></video>

<script>
export default {
  data() {
    return {
      localPreviewUrl: '',
    };
  },
  methods: {
    beforeUploadVideo(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = () => {
          this.localPreviewUrl = reader.result;
          resolve(true); // 允许上传
        };
        reader.onerror = error => reject(error);
      });
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

以上就是使用 el-upload 组件实现视频文件上传、回显的基本步骤。根据实际项目需求，可能还需要考虑错误处理、进度显示、多文件上传等功能的实现。