Vue.js中使用Axios上传文件及评论的格式组织疑问

当前代码存在几个关键问题导致无法正确上传文件和对应评论：

• handleFileUpload 方法未接收事件参数，无法获取用户选中的文件
• 未关联当前上传项所属的父级item ID，无法正确拼接请求URL
• FormData的append逻辑错误，没有正确绑定文件和对应的评论

以下是修正后的完整实现：

修改后的HTML代码 #

<div id="app" class="container">
   <div class="block">
       <div class="item" v-for="(item, itemIndex) in items" :key="item.id">
           <div class="item__title">{{ item.title }}</div>
           <div class="item__files">
               <div class="file" v-for="(file, fileIndex) in item.files" :key="fileIndex">
                   <input type="file" @change="handleFileUpload($event, item, file)">
                   <input type="text" placeholder="comment" v-model="file.comment">
               </div>
           </div>
       </div>
   </div>
</div>

修改后的JavaScript代码 #

new Vue({
  el: "#app",
  data: {
    items: [
        {
            id: "42",
            title: "first",
            files: [
                {
                    file: "",
                    comment: "",
                },
                {
                    file: "",
                    comment: "",
                }
            ],
        },
        {
            id: "78",
            title: "second",
            files: [
                {
                    file: "",
                    comment: "",
                },
                {
                    file: "",
                    comment: "",
                }
            ],
        },
    ]
  },
  methods: {
    handleFileUpload(event, item, file) {
      // 获取用户选中的文件
      const selectedFile = event.target.files[0];
      if (!selectedFile) return;

      // 将文件保存到对应file对象中（可选，用于后续预览或状态展示）
      file.file = selectedFile;

      let formData = new FormData();
      // 追加文件、评论和父项ID到FormData
      formData.append("file", selectedFile);
      formData.append("comment", file.comment);
      formData.append("itemId", item.id);

      axios
        .post(`/api/request/${item.id}`, formData)
        .then(function () {
          console.log("上传成功！");
        })
        .catch(function () {
          console.log("上传失败！");
        });
    }
  }
});

关键修改说明 #

1. 传递必要参数：在@change事件中传入$event（获取文件）、item（获取父项ID）、file（获取对应评论）三个参数，让方法能拿到所有需要的上传数据
2. 正确获取文件：通过event.target.files[0]获取用户选中的单个文件
3. FormData正确拼接：分别将文件、评论、父项ID追加到FormData中，确保服务器能接收到对应字段
4. 优化请求配置：无需手动设置Content-Type: multipart/form-data，axios会自动根据FormData生成包含boundary的正确请求头

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