vue+elementui上传视频并回显

在Vue中使用Element UI上传视频并回显的基本步骤如下：

1. 使用<el-upload>组件来上传视频。
2. 使用<video>标签来回显视频。

以下是一个简单的例子：

<template>
  <div>
    <!-- 上传组件 -->
    <el-upload
      class="upload-demo"
      drag
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-success="handleVideoSuccess"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
 
    <!-- 视频回显 -->
    <video v-if="videoUrl" :src="videoUrl" controls></video>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      videoUrl: '', // 视频地址
    };
  },
  methods: {
    handleVideoSuccess(response, file, fileList) {
      // 假设上传成功后服务器返回的视频地址在response.data中
      this.videoUrl = response.data;
    },
  },
};
</script>

在这个例子中，我们使用了el-upload组件来上传视频，并在上传成功后通过handleVideoSuccess方法更新视频地址。然后，我们通过v-if和videoUrl来判断是否需要显示视频，并使用<video>标签来回显视频。

注意：

• action属性是上传的服务器地址，这里使用了一个假数据接口地址，你应该替换为你的实际上传接口。
• 上传成功后的回调函数handleVideoSuccess中，response.data应该替换为实际从服务器返回的视频地址。
• 视频的控制器通过controls属性添加到<video>标签上，允许用户播放、暂停和调整视频音量。