VueJs项目中Vuetify表单结合Axios提交数据遇404问题

先给你梳理下几个关键问题，逐个解决就能搞定：

1. 核心404原因：请求路径不匹配 #

你Axios里写的axios.post("/about", formData);，大概率是后端并没有开放/about这个POST接口。先确认后端的实际接口路径——比如是不是/api/upload或者/csv/upload，把前端请求路径改成和后端一致，这是解决404的首要步骤。

2. 前端表单的几个细节bug #

看你的代码，还有几个地方会导致提交异常：

• 按钮事件绑定错误：你给v-btn用了@submit，但@submit是<form>标签的专属事件，按钮应该用@click="submitFiles"，或者给v-form加@submit.prevent="submitFiles"，然后按钮改成<v-btn type="submit">，这样更符合表单提交的逻辑。
• 数字输入框未绑定数据：你两个<v-text-field type="number">没有加v-model，这样提交时根本拿不到输入的数字值。得先在data里声明变量，再绑定：

<v-text-field type="number" label="zadaj cislo" v-model="num1" />
<v-text-field type="number" label="zadaj cislo" v-model="num2" />

data() {
  return {
    files: [],
    num1: null,
    num2: null
  }
}

提交时把这两个值加到FormData里：

formData.append("num1", this.num1);
formData.append("num2", this.num2);

• 表单验证缺失：给v-form加v-model="valid"，提交前先判断this.valid，避免无效提交。

3. Axios请求的配置细节 #

提交FormData时，不需要手动设置Content-Type: multipart/form-data——浏览器会自动处理，但有时候Axios的默认头会干扰，你可以设置headers: { 'Content-Type': undefined }，让浏览器自动生成包含boundary的正确请求头。另外，加上错误捕获能帮你更快排查问题：

axios.post("/你的正确接口路径", formData, {
  headers: {
    'Content-Type': undefined // 交给浏览器自动处理
  }
})
.then(res => {
  console.log("上传成功", res);
})
.catch(err => {
  console.error("请求错误详情", err);
  // 这里能看到具体错误，比如是不是路径真的错了，还是后端接收逻辑有问题
});

4. 后端接收逻辑确认 #

确保后端正确配置了FormData接收：比如Node.js/Express需要用multer中间件处理文件上传；Java/SpringBoot要用上@RequestParam("files") MultipartFile[] files接收文件，@RequestParam("num1") Integer num1接收数字参数。不过404还是优先排查路径问题。

最后给你整理下修正后的完整代码片段：

模板部分 #

<v-form v-model="valid">
  <v-container>
    <v-row>
      <v-file-input 
        show-size 
        counter 
        multiple 
        label="Nacitaj CSV" 
        ref="myfile" 
        v-model="files" 
        required
      ></v-file-input>
    </v-row>
    <v-row>
      <v-col>
        <v-text-field 
          type="number" 
          label="zadaj cislo" 
          v-model="num1" 
          required
        />
      </v-col>
      <v-col>
        <v-text-field 
          type="number" 
          label="zadaj cislo" 
          v-model="num2" 
          required
        />
      </v-col>
    </v-row>
    <v-row>
      <v-col :cols="2">
        <v-btn 
          block 
          color="primary" 
          type="submit" 
          @click.prevent="submitFiles"
        >
          Submit
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</v-form>

脚本部分 #

export default {
  data() {
    return {
      files: [],
      num1: null,
      num2: null,
      valid: false
    }
  },
  methods: {
    submitFiles() {
      if (this.valid && this.files.length > 0) {
        let formData = new FormData();
        // 添加文件
        this.files.forEach(file => {
          formData.append("files", file, file.name);
        });
        // 添加数字字段
        formData.append("num1", this.num1);
        formData.append("num2", this.num2);
        formData.append("test", "foo bar");
        
        // 替换成你的后端正确接口路径
        axios.post("/api/upload", formData, {
          headers: {
            'Content-Type': undefined
          }
        })
        .then(res => {
          console.log("上传成功", res);
          // 上传成功后重置表单
          this.files = [];
          this.num1 = null;
          this.num2 = null;
        })
        .catch(err => {
          console.error("请求失败", err);
          alert("上传失败，请检查接口路径或后端配置");
        });
      }
    }
  }
}

先优先核对后端接口路径，这是404的核心原因。再调整前端的表单绑定和Axios配置，应该就能解决问题了。

内容的提问来源于stack exchange，提问作者Asphyxiar