vue中的el-upload picture-card同时上传图片和视频

`el-upload`组件可以同时上传图片和视频，你可以通过设置`accept`属性来指定上传的文件类型。同时，你还需要根据文件类型来设置上传成功后的处理逻辑。

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

<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>

在上述代码中，我们通过设置`accept`属性来指定上传的文件类型，同时在`beforeUpload`方法中对上传的文件类型进行了验证。在上传成功后，我们通过判断文件的`type`属性来区分图片和视频，并进行不同的处理逻辑。

需要注意的是，如果你想同时上传图片和视频，你需要在后端进行相应的处理，以便能够正确地保存上传的文件。