使用Vuetify <v-file-input>通过axios上传文件时仅发送空对象的问题

DevOps 小满

2026-8-5

文件上传问题求助

我在用Vuetify框架开发，尝试通过<v-file-input>实现多文件上传，但后端始终只收到空数组，仅能看到文件名。我能通过this.log_file_upload[0].text()获取到完整文件内容，但发送的请求里文件数据是空的，遇到了类似无人处理的相关问题。

Vuetify代码

<v-file-input
  v-model="log_file_upload"
  color="accent"
  counter
  label="File input"
  multiple
  placeholder="Select your files"
  outlined
  :show-size="1000"
  @change="fileUpload"
>
  <template v-slot:selection="{ index, text }">
    <v-chip
      v-if="index < 5"
      color="accent"
      dark
      label
      small
    >
      {{ text }}
    </v-chip>
  </template>
</v-file-input>

JS处理函数

fileUpload: function() {
  var formData = new FormData();
  formData.append("file", this.log_file_upload[0]);
  axios
    .post(`/upload/`, formData, {
      headers: {
        "Content-Type": "multipart/form-data"
      }
    })
    .then((response) => {
      console.log(response.data);
    })
},

解决建议

不要手动设置Content-Type: multipart/form-data，axios会自动根据FormData生成带boundary的正确请求头，手动设置会丢失boundary信息，导致后端无法解析文件。
确认this.log_file_upload是标准File对象数组：在fileUpload函数里打印console.log(this.log_file_upload[0])，检查输出是否为File类型，而非其他包装对象。
多文件上传时循环追加所有文件：
```
this.log_file_upload.forEach(file => {
  formData.append("file[]", file);
});
```
后端对应使用数组格式参数接收（比如Python Flask用request.files.getlist('file[]')，PHP用$_FILES['file']）。
检查axios版本，旧版本可能存在FormData处理bug，尝试升级到最新稳定版。