vue3使用element-plus上传视频回显

以下是使用element-plus上传视频并回显的示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="uploadUrl"
      :on-success="handleSuccess"
      :show-file-list="false"
      :before-upload="beforeUpload"
    >
      <el-button size="small" type="primary">点击上传视频</el-button>
    </el-upload>
    <video v-if="videoUrl" :src="videoUrl" controls></video>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  setup() {
    const uploadUrl = 'your_upload_url'
    const videoUrl = ref('')

    const beforeUpload = (file) => {
      const isVideo = file.type.startsWith('video/')
      if (!isVideo) {
        ElMessage.error('请上传视频文件')
      }
      const isLt100M = file.size / 1024 / 1024 < 100
      if (!isLt100M) {
        ElMessage.error('上传视频大小不能超过 100MB')
      }
      return isVideo && isLt100M
    }

    const handleSuccess = (response) => {
      if (response.code === 200) {
        videoUrl.value = response.data.url
      } else {
        ElMessage.error(response.msg)
      }
    }

    return {
      uploadUrl,
      videoUrl,
      beforeUpload,
      handleSuccess
    }
  }
}
</script>

这里使用了Vue 3的Composition API，使用了`ref`定义响应式变量`videoUrl`，并在`handleSuccess`回调函数中将上传成功后的视频地址赋值给`videoUrl`，以实现回显。在上传之前，使用`beforeUpload`实现了文件类型和大小的限制，并在不符合条件时使用`ElMessage.error`提示用户。上传成功或失败时，也使用`ElMessage`进行相应的提示。