vue 实现上传视频

Vue 实现上传视频的方法

使用原生 HTML5 文件上传

在 Vue 中可以通过 <input type="file"> 结合 FormData 实现视频上传功能。

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

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

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

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

使用第三方组件库

Element UI 或 Ant Design Vue 等组件库提供了现成的上传组件。

<template>
  <el-upload
    action="/api/upload"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
    accept="video/*"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isVideo = file.type.includes('video/')
      if (!isVideo) {
        this.$message.error('只能上传视频文件')
        return false
      }
      return true
    },
    handleSuccess(response) {
      console.log('上传成功', response)
    },
    handleError(error) {
      console.error('上传失败', error)
    }
  }
}
</script>

显示上传进度

可以添加进度条显示上传进度。

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadVideo">上传</button>
    <progress :value="uploadProgress" max="100"></progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      uploadProgress: 0
    }
  },
  methods: {
    uploadVideo() {
      const config = {
        onUploadProgress: progressEvent => {
          this.uploadProgress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          )
        }
      }

      axios.post('/api/upload', formData, config)
    }
  }
}
</script>

文件大小限制

在上传前检查文件大小。

methods: {
  beforeUpload(file) {
    const maxSize = 100 * 1024 * 1024 // 100MB
    if (file.size > maxSize) {
      this.$message.error('视频大小不能超过100MB')
      return false
    }
    return true
  }
}

视频预览功能

上传前可以预览视频内容。

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

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

分片上传大文件

对于大文件可以使用分片上传。

async function chunkUpload(file) {
  const chunkSize = 5 * 1024 * 1024 // 5MB
  const chunks = Math.ceil(file.size / chunkSize)

  for (let i = 0; i < chunks; i++) {
    const start = i * chunkSize
    const end = Math.min(file.size, start + chunkSize)
    const chunk = file.slice(start, end)

    const formData = new FormData()
    formData.append('chunk', chunk)
    formData.append('chunkIndex', i)
    formData.append('totalChunks', chunks)
    formData.append('fileName', file.name)

    await axios.post('/api/upload-chunk', formData)
  }

  await axios.post('/api/merge-chunks', {
    fileName: file.name,
    totalChunks: chunks
  })
}

以上方法涵盖了从基础上传到高级功能的实现，可以根据项目需求选择合适的方式。