vue如何实现文件上传

Vue 可以通过以下步骤实现文件上传：

1. 在模板中创建一个 input 标签，设置 type 属性为 file。

<template>
  <div>
    <input type="file" @change="handleFileUpload">
  </div>
</template>

2. 在 Vue 实例中定义一个方法来处理文件上传事件。该方法可以使用 HTML5 提供的 FormData 对象将文件上传到服务器。

<script>
export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

      // 将 formData 发送到服务器
      // ...
    }
  }
}
</script>

3. 如果需要在文件上传过程中显示上传进度，可以使用 axios 或其他 HTTP 库，并使用 onUploadProgress 回调函数来获取上传进度。

<script>
import axios from 'axios';

export default {
  methods: {
    async handleFileUpload(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

      const response = await axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          console.log(`Upload Progress: ${Math.round(progressEvent.loaded / progressEvent.total * 100)}%`);
        }
      });

      console.log(`Upload Success: ${response.data}`);
    }
  }
}
</script>

以上就是使用 Vue 实现文件上传的基本步骤。需要注意的是，由于浏览器的安全限制，JavaScript 无法直接访问本地文件系统，因此文件上传必须通过 input 标签来完成。另外，需要选择合适的文件上传方式，并注意服务器端的处理方式。