Vue.js 使用 Axios 上传多个文件：完整指南

使用 Vue.js 和 Axios 库上传多个文件是一个常见的需求。本文将提供一个完整的指南，涵盖了从创建文件选择输入框到将数据提交到服务器的所有步骤。

1. 创建文件选择输入框

首先，你需要在 HTML 中创建一个文件选择输入框。使用 <input> 标签，并将 type 属性设置为 file，multiple 属性设置为 true，以允许选择多个文件：

<input type='file' multiple @change='onFileChange' />

2. 处理文件选择事件

在 Vue 组件中，定义一个 onFileChange 方法来处理文件选择事件。该方法会将选定的文件添加到 FormData 对象中，并使用 Axios 提交到服务器：

methods: {
  onFileChange(event) {
    const files = event.target.files;
    const formData = new FormData();
    for (let i = 0; i < files.length; i++) {
      formData.append('files[]', files[i]);
    }
    axios.post('/upload', formData);
  }
}

解释:

event.target.files：获取选定的文件列表。
FormData：创建 FormData 对象，用于存储文件数据。
append('files[]', files[i])：将每个文件添加到 FormData 对象中，并指定表单字段名为 files[]。
axios.post('/upload', formData)：使用 Axios 将 FormData 对象提交到 /upload 路径。

3. 服务器端处理

在服务器端，你需要接收 FormData 对象并处理上传的文件。具体实现方法取决于你的服务器端语言和框架。

总结

本文提供了一个使用 Vue.js 和 Axios 上传多个文件的完整指南。通过遵循这些步骤，你可以轻松地实现文件上传功能，并将其集成到你的 Vue.js 应用程序中。