Javascript 属性错误：'；非类型'；对象没有属性'；解码'；通过JS发送表单时

我试图通过一个表单，使用JavaScript Fetch将一些数据发送到Django视图，包括一个图像。我连续九次收到此错误消息，就好像没有数据发送到后端一样：

我的看法如下：

if "contributors" in data:
        try:
            Project.objects.get(title=data['title'])
            return JsonResponse({'error': 'Project title already exists!'}, status=406)

        except Project.DoesNotExist:
            form = ProjectForm(request.POST, request.FILES)

            project = Project.objects.create(
                title=data['title'],
                description=data['description'], logo=data['logo'])

            return JsonResponse({"message": "Project successfully created!"}, status=201)

还有我的JavaScript：

  const projectName = document.getElementById("project_name");
  const contributors = document.getElementById("id_contributors");
  const description = document.getElementById("id_description");
  const logo = document.getElementById("id_logo");
  const projectCsrf = document.getElementsByName("csrfmiddlewaretoken")[0];

  document.getElementById("submitProjectForm").addEventListener("click", () => {

let formData = {
  title: projectName.value,
  contributors: contributors.value,
  description: description.value,
  logo: logo.files[0],
};

submitForm(projectCsrf, formData);
});

function submitForm(csrf, fields) {
const request = new Request(window.location.origin, {
  headers: {
    "X-CSRFToken": csrf.value,
    "Content-Type": "multipart/form-data",
  },
});

fetch(request, {
  method: "POST",
  body: JSON.stringify(fields),
})
  .then((response) => response.json())
  .then((result) => alert(result.message ? result.message : result.error))
  .catch((err) => console.log(err));
}

---

是不是因为python的Json.loads方法无法解码JavaScript文件对象？提前谢谢

当您在数据中包含图像且数据是formdata时，为什么要将其转换为字符串：

fetch(request, {
  method: "POST",
  body: JSON.stringify(fields),
})

我认为您应该将formdata本身添加到FetchAPI的主体中

fetch(request, {
  method: "POST",
  body: fields,
})

---

经过几个小时的调试，我终于找到了答案。Ali javanmardi的部分正确之处在于，我不应该将数据转换为JSON，因为我正在发送文件

此错误的主要问题是我的fetch函数中的标题：

"Content-Type": "multipart/form-data",

这似乎是造成主要问题的原因，当我将其更改为：

"X-Requested-With": "XMLHttpRequest"

成功了

我还将从表单收集的所有数据转换为FormData，而不是创建自己的对象：

let formData = new FormData();
formData.append("logo", logo.files[0]);
formData.append("title", projectName.value);
formData.append("contributors", contributors.value);
formData.append("description", description.value);

在我的视图的后端，我应该保存表单实例，而不是创建新的项目对象：

new_form = ProjectForm(request.POST, request.FILES)
            if new_form.is_valid():
                new_form.save()

现在我可以上传图片了