Nuxt.js+Axios上传大文件时FormData生成耗时过长问题求助

核心原因 #

你遇到的FormData生成耗时问题，根源在于Vue响应式对象的遍历开销：

• 你的formData是Vue data中的响应式对象，遍历它的属性时，Vue的响应式系统（Proxy/Object.defineProperty）会触发额外的追踪逻辑。
• 当属性是大File对象（100MB+）时，这种响应式追踪的开销会被急剧放大，直接导致FormData生成过程变慢。

解决方案 #

1. 转换为普通对象后遍历

把响应式的formData转换成普通对象，脱离Vue响应式系统的追踪，再进行append操作：

store() {
  this.isLoading = true;
  // 将响应式对象转为普通对象，避免额外性能开销
  const plainForm = {...this.formData};
  const sendFormData = new FormData();
  
  for (const key in plainForm) {
    sendFormData.append(key, plainForm[key]);
  }

  axios.post(`${api}/jurnals`, sendFormData, {
    headers: { "Content-Type": "multipart/form-data" },
  })
  .then((res) => {
    this.response = res;
  })
  .catch((err) => {
    console.log(err);
  })
  .finally(() => {
    this.formData = {
      "year": null,
      "title": null,
      "jurnal": null,
      "image": null,
    };
    this.isOpenModal = false;
    this.isLoading = false;
  });
}

2. 手动append字段（更高效）

由于你的表单字段数量极少，直接手动append每个字段，彻底避免遍历响应式对象的开销：

store() {
  this.isLoading = true;
  const sendFormData = new FormData();
  
  sendFormData.append('year', this.formData.year);
  sendFormData.append('title', this.formData.title);
  sendFormData.append('jurnal', this.formData.jurnal);
  sendFormData.append('image', this.formData.image);

  axios.post(`${api}/jurnals`, sendFormData, {
    headers: { "Content-Type": "multipart/form-data" },
  })
  .then((res) => {
    this.response = res;
  })
  .catch((err) => {
    console.log(err);
  })
  .finally(() => {
    this.formData = {
      "year": null,
      "title": null,
      "jurnal": null,
      "image": null,
    };
    this.isOpenModal = false;
    this.isLoading = false;
  });
}

3. 排查额外监听逻辑

检查是否存在针对formData的watchers或computed属性，这些逻辑可能在你操作表单属性时触发不必要的计算，进一步拖慢速度。如果有非必要的监听，可以暂时禁用或优化。

内容的提问来源于stack exchange，提问作者Махмуд Якубов