Vue.js搭配Django后端更新数据时不修改图片触发报错问题求解

• 字段重复提交：你在手动追加nama、nip、jobs、picture四个字段后，又通过Lodash的_.each遍历this.datapengajarstaf对象重复追加了所有字段，FormData中同一个Key存在多个值时会被解析为数组，触发后端参数校验失败。
• 空图片字段未处理：未修改图片时this.gambar为空值（undefined/null/空字符串），直接追加到FormData中会触发后端图片字段的格式校验错误，而你用Postman测试时不会主动传空的picture字段，因此可以正常更新。
• 额外注意：手动设置multipart/form-data请求头时没有携带boundary参数，可能导致后端无法正常解析请求体，该请求头不需要手动设置，浏览器会自动生成带正确boundary的请求头。

修改代码逻辑，删除重复的字段追加步骤，仅在选择了新图片时才追加picture字段，同时移除手动设置的Content-Type请求头。如果你的Django服务对PUT方法的FormData解析支持不佳，可改为POST请求加_method=put参数模拟PUT请求。

修改后的参考代码：

ubah() {
  let datapengajarstaf = new FormData();
  // 追加普通文本字段
  datapengajarstaf.append("nama", this.datapengajarstaf.nama);
  datapengajarstaf.append("nip", this.datapengajarstaf.nip);
  datapengajarstaf.append("jobs", this.datapengajarstaf.jobs);
  // 仅当选择了新图片时才追加picture字段
  if (this.gambar && this.gambar instanceof File) {
    datapengajarstaf.append("picture", this.gambar);
  }
  // 移除原重复的_.each遍历逻辑，避免字段重复提交

  axios
    .put("http://127.0.0.1:8000/api/Detailpengajarstaff/"+this.id, datapengajarstaf)
    .then(response => {
      this.$router.push("/indexpengajarstaff");
      this.$q.notify({
        type: "positive",
        message: `Data berhasil ditambah.`
      });
    })
    .catch(err => {
      if (err.response.status === 422) {
        this.errors = [];
        _.each(err.response.data.errors, error => {
          _.each(error, e => {
            this.errors.push(e);
          });
        });
      }
    });
}

如果修改后PUT请求仍然报错，可将请求改为POST模拟PUT：

axios.post("http://127.0.0.1:8000/api/Detailpengajarstaff/"+this.id, datapengajarstaf, {
  params: {
    _method: 'put'
  }
})

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