vue实现上传视频

2026-02-17 14:57:52VUE

使用 `<input type="file">` 实现基础上传

在 Vue 中可以通过原生 <input type="file"> 结合 FileReader 或 FormData 实现视频上传。创建一个文件选择按钮并监听 change 事件：

<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 或其他 HTTP 库发送请求
      axios.post('/api/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      });
    },
  },
};
</script>

使用第三方库（如 `vue-dropzone`）

对于更复杂的需求（如拖拽上传、预览等），可以使用第三方库如 vue-dropzone：

安装依赖：
```
npm install vue2-dropzone
```

在组件中配置：


<template>
<vue-dropzone
 ref="myVueDropzone"
 id="dropzone"
 :options="dropzoneOptions"
 @vdropzone-success="uploadSuccess"
/>
</template>

import vue2Dropzone from 'vue2-dropzone'; import 'vue2-dropzone/dist/vue2Dropzone.min.css';

export default { components: { vueDropzone: vue2Dropzone }, data() { return { dropzoneOptions: { url: '/api/upload', acceptedFiles: 'video/*', maxFilesize: 500, // MB addRemoveLinks: true, }, }; }, methods: { uploadSuccess(file, response) { console.log('上传成功', response); }, }, };

```

分片上传与进度显示

大视频文件建议分片上传，结合 axios 的 onUploadProgress 实现进度条：

<template>
  <input type="file" @change="handleFileUpload" />
  <progress :value="uploadProgress" max="100"></progress>
</template>

<script>
export default {
  data() {
    return {
      uploadProgress: 0,
    };
  },
  methods: {
    async uploadVideo() {
      const chunkSize = 5 * 1024 * 1024; // 5MB 分片
      const chunks = Math.ceil(this.selectedFile.size / chunkSize);
      for (let i = 0; i < chunks; i++) {
        const chunk = this.selectedFile.slice(
          i * chunkSize,
          (i + 1) * chunkSize
        );
        const formData = new FormData();
        formData.append('chunk', chunk);
        formData.append('chunkIndex', i);
        await axios.post('/api/upload-chunk', formData, {
          onUploadProgress: (progressEvent) => {
            this.uploadProgress = Math.round(
              (progressEvent.loaded / progressEvent.total) * 100
            );
          },
        });
      }
    },
  },
};
</script>

视频预览与格式验证

在上传前验证文件类型并生成预览：

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

<script>
export default {
  data() {
    return {
      videoUrl: '',
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (!file.type.includes('video/')) {
        alert('请上传视频文件！');
        return;
      }
      this.videoUrl = URL.createObjectURL(file);
    },
  },
};
</script>