vue前端上传组件允许上传视频和图片实现

Vue前端上传组件可以使用第三方库如`element-ui`的`el-upload`组件来实现上传图片和视频的功能。

首先，需要在Vue项目中引入`element-ui`库：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

然后，在需要使用上传组件的页面中，可以使用`el-upload`组件来实现上传图片和视频的功能。以下是一个示例：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :file-list="fileList"
      :accept="'image/*,video/*'"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传图片或视频</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      const isImage = file.type.indexOf('image') !== -1
      const isVideo = file.type.indexOf('video') !== -1
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage && !isVideo) {
        this.$message.error('请选择图片或视频文件')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB')
        return false
      }
    },
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList)
      this.fileList = fileList.slice(-1)
    },
    handleError(error, file, fileList) {
      console.log(error, file, fileList)
      this.$message.error('上传失败')
    }
  }
}
</script>

其中，`el-upload`组件的`accept`属性可以用来限制上传文件的类型，本示例中使用`image/*,video/*`表示只允许上传图片或视频文件；`beforeUpload`方法用来在上传前进行文件类型和大小的校验；`handleSuccess`和`handleError`方法分别用来处理上传成功和失败的情况。

需要注意的是，上传文件的具体实现需要在后端服务器中完成。在本示例中，`action`属性指定了上传文件的后端接口地址为`/upload`，具体实现需要后端开发人员完成。