vue2 使用elementui2 上传视频

要在Vue2中使用ElementUI2上传视频，你需要完成以下步骤：

1. 安装ElementUI2和Vue2

npm install element-ui@2.15.1
npm install vue@2.6.14

2. 引入ElementUI2和样式

在你的Vue项目入口文件中，引入ElementUI2和它的CSS文件。

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

Vue.use(ElementUI)

3. 创建上传组件

在你的Vue组件中，使用ElementUI2的`el-upload`组件创建一个上传组件。你需要设置`action`属性为上传视频的URL，`on-success`属性为上传成功后的回调函数。

<template>
  <el-upload
    class="upload-demo"
    action="/uploadVideo"
    :on-success="handleUploadSuccess"
    :on-error="handleUploadError"
    :before-upload="beforeUpload"
    :auto-upload="false"
    :file-list="fileList">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="handleUpload">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">只能上传mp4文件</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleUpload() {
      this.$refs.upload.submit()
    },
    handleUploadSuccess(response, file, fileList) {
      console.log(response)
    },
    handleUploadError(error, file, fileList) {
      console.log(error)
    },
    beforeUpload(file) {
      const isMp4 = file.type === 'video/mp4'
      if (!isMp4) {
        this.$message.error('只能上传mp4文件')
      }
      return isMp4
    }
  }
}
</script>

4. 处理上传视频的后端逻辑

在你的后端服务器上，你需要编写接收上传视频的接口，并将视频保存到服务器上。你可以使用Node.js和Express框架来编写接口，使用`multer`中间件来处理文件上传。

const express = require('express')
const multer = require('multer')
const app = express()

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname)
  }
})

const upload = multer({ storage: storage })

app.post('/uploadVideo', upload.single('video'), (req, res) => {
  const file = req.file
  if (!file) {
    const error = new Error('Please upload a file')
    error.httpStatusCode = 400
    return res.send(error)
  }
  res.send(file)
})

app.listen(3000, () => {
  console.log('Server started on port 3000')
})

这样，你就可以使用ElementUI2在Vue2中上传视频了。