vue中的el-upload picture-card同时上传图片和视频,视频上传成功无法显示

如果你在上传视频后无法正确显示上传成功后的内容，可能是因为`el-upload`组件默认只展示上传成功后的图片，对于其他类型的文件则自定义模板进行展示。你可以通过设置`list-type`属性为`'picture-card'`来使用默认的模板，并在模板中根据文件类型来展示不同的内容。

下面是一个示例代码，展示如何同时上传图片和视频，并在上传成功后根据文件类型来显示不同的内容：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :accept="accept"
    list-type="picture-card">
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      accept: 'image/*,video/*'
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 根据文件类型进行不同的处理逻辑
      if (file.type.startsWith('image/')) {
        // 图片上传成功后的处理逻辑
        console.log('Image uploaded:', file.name)
      } else if (file.type.startsWith('video/')) {
        // 视频上传成功后的处理逻辑
        console.log('Video uploaded:', file.name)
      }
    },
    beforeUpload(file) {
      // 对上传的文件类型进行验证
      const isImage = file.type.startsWith('image/')
      const isVideo = file.type.startsWith('video/')
      const isLt10M = file.size / 1024 / 1024 < 10

      if (!isImage && !isVideo) {
        this.$message.error('只能上传图片或视频')
        return false
      }
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过 10MB')
        return false
      }
      return true
    }
  }
}
</script>

在上述代码中，我们通过设置`list-type`属性为`'picture-card'`来使用默认的模板，并在模板中根据文件类型来展示不同的内容。需要注意的是，如果你想同时上传图片和视频，你需要在后端进行相应的处理，以便能够正确地保存上传的文件。