vue上传视频实现

实现视频上传的基本方法

在Vue中实现视频上传功能，可以通过使用HTML的<input type="file">元素结合FormData对象来完成。以下是一个基本实现示例：

<template>
  <div>
    <input type="file" accept="video/*" @change="handleFileUpload" />
    <button @click="uploadVideo">上传视频</button>
  </div>
</template>

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

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

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        console.log('上传成功', response.data)
      } catch (error) {
        console.error('上传失败', error)
      }
    }
  }
}
</script>

添加进度显示功能

为了提升用户体验，可以添加上传进度显示：

<template>
  <div>
    <input type="file" accept="video/*" @change="handleFileUpload" />
    <button @click="uploadVideo" :disabled="uploading">
      {{ uploading ? '上传中...' : '上传视频' }}
    </button>
    <progress v-if="uploading" :value="progress" max="100"></progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoFile: null,
      uploading: false,
      progress: 0
    }
  },
  methods: {
    async uploadVideo() {
      if (!this.videoFile) return

      this.uploading = true
      const formData = new FormData()
      formData.append('video', this.videoFile)

      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)
      } finally {
        this.uploading = false
      }
    }
  }
}
</script>

文件大小和类型验证

在上传前对视频文件进行验证：

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('请上传有效的视频文件 (MP4, WebM 或 Ogg)')
      return
    }

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

    this.videoFile = file
  }
}

使用第三方库实现更复杂功能

对于更复杂的需求，可以考虑使用第三方上传库如vue-dropzone或uppy：

// 使用vue-dropzone示例
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'

export default {
  components: {
    vueDropzone: vue2Dropzone
  },
  data() {
    return {
      dropzoneOptions: {
        url: '/api/upload',
        thumbnailWidth: 150,
        maxFilesize: 100, // MB
        acceptedFiles: 'video/*',
        addRemoveLinks: true,
        dictDefaultMessage: '拖放视频文件到这里或点击上传'
      }
    }
  }
}

服务器端处理

后端处理示例(Node.js + Express)：

const express = require('express')
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })

app.post('/api/upload', upload.single('video'), (req, res) => {
  // req.file包含上传文件信息
  res.json({
    success: true,
    filePath: req.file.path,
    fileName: req.file.originalname
  })
})

视频预览功能

上传前提供视频预览：

<template>
  <div>
    <input type="file" accept="video/*" @change="handleFileUpload" />
    <video v-if="videoUrl" :src="videoUrl" controls width="300"></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: null
    }
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0]
      this.videoUrl = URL.createObjectURL(file)
    }
  }
}
</script>

以上方法涵盖了Vue中实现视频上传的主要功能点，可以根据实际需求进行组合或扩展。