vue2上传视频文件

在Vue 2中，上传视频文件通常涉及到使用HTML的`<input type="file">`元素配合File API，以及一些前端库如axios或FormData来进行文件上传。以下是一个简单的步骤概述：

1. **HTML模板**:

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="video/*">
    <button @click="uploadVideo">上传</button>
    <p v-if="selectedVideo">已选视频：{{ selectedVideo.name }}</p>
  </div>
</template>

2. **JavaScript处理**:

<script>
export default {
  data() {
    return {
      selectedVideo: null,
    };
  },
  methods: {
    handleFileChange(e) {
      this.selectedVideo = e.target.files;
    },
    uploadVideo() {
      if (!this.selectedVideo) {
        alert('请选择一个视频文件');
        return;
      }

      const formData = new FormData();
      formData.append('video', this.selectedVideo, this.selectedVideo.name);

      axios.post('/api/upload', formData)
        .then(response => {
          console.log('上传成功', response.data);
        })
        .catch(error => {
          console.error('上传失败', error);
        });
    },
  },
};
</script>

- `handleFileChange`事件监听文件选择变化，将选择的视频文件保存在`selectedVideo`数据属性中。
- `uploadVideo`方法创建一个FormData对象，并将视频文件添加到表单中。然后，使用axios发起POST请求到服务器的`/api/upload`端点。

**相关问题--:**
1. 如何限制用户只能选择视频文件？
2. Vue 2中的axios是如何替代原生XMLHttpRequest进行文件上传的？
3. 如果服务器返回一个JSON响应，如何处理上传成功的详细信息？