vue怎么实现视频上传

实现视频上传功能

在Vue中实现视频上传功能通常需要结合HTML5的<input type="file">元素和后端API。以下是实现方法：

前端实现

创建文件上传组件模板：

<template>
  <div>
    <input type="file" accept="video/*" @change="handleFileUpload"/>
    <button @click="uploadVideo">上传视频</button>
    <div v-if="progress > 0">上传进度: {{progress}}%</div>
  </div>
</template>

处理文件选择和上传逻辑：

<script>
export default {
  data() {
    return {
      selectedFile: null,
      progress: 0
    }
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0]
    },
    async uploadVideo() {
      if (!this.selectedFile) return

      const formData = new FormData()
      formData.append('video', this.selectedFile)

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          onUploadProgress: (progressEvent) => {
            this.progress = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            )
          }
        })
        console.log('上传成功', response.data)
      } catch (error) {
        console.error('上传失败', error)
      }
    }
  }
}
</script>

后端处理

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('/api/upload', upload.single('video'), (req, res) => {
  res.json({
    message: '文件上传成功',
    file: req.file
  })
})

app.listen(3000, () => {
  console.log('服务器运行在3000端口')
})

功能扩展

添加视频预览功能：

methods: {
  handleFileUpload(event) {
    this.selectedFile = event.target.files[0]
    this.previewVideo()
  },
  previewVideo() {
    const videoURL = URL.createObjectURL(this.selectedFile)
    this.$refs.videoPlayer.src = videoURL
  }
}

<video ref="videoPlayer" controls style="max-width: 100%"></video>

文件限制

添加文件大小和类型验证：

methods: {
  handleFileUpload(event) {
    const file = event.target.files[0]
    const validTypes = ['video/mp4', 'video/webm', 'video/ogg']
    const maxSize = 100 * 1024 * 1024 // 100MB

    if (!validTypes.includes(file.type)) {
      alert('请上传有效的视频文件')
      return
    }

    if (file.size > maxSize) {
      alert('文件大小不能超过100MB')
      return
    }

    this.selectedFile = file
  }
}

进度条优化

使用第三方UI库美化进度显示：

<el-progress :percentage="progress" v-if="progress > 0"></el-progress>

以上实现涵盖了视频上传的基本功能，包括文件选择、上传进度显示、前端验证和后端接收处理。根据实际需求，可以进一步扩展如断点续传、分片上传等高级功能。