如何发送多个文件 FormData，其中每个文件属于不同的 FormControl？

Question

我正在建立一个网站，教师可以在其中上传自己的课程。

课程结构

CourseName
|-Module1
  |-Lecture 1
  |-Lecture 2
|-Module2
  |-Lecture 1
  |-Lecture 2

表单值结构类似于

{
  "coursename": "Complete java beginners guide",
  "board": 0,
  "class": 3,
  "coursedescription": "Learn java from scratch",
  "modules": [
    {
      "modulename": "Week 1: Intro to java",
      "lectures": [
        {
          "lecturename": "Data types in Java",
          "lecturepath": {
            "0": {}
          },
          "lecturedescription": "learn datatypes in java"
        },
        {
          "lecturename": "Primary vs Secondary types",
          "lecturepath": {
            "0": {}
          },
          "lecturedescription": "learn about primary vs secondary type"
        }
      ]
    },
    {
      "modulename": "Week 2 some more learning",
      "lectures": [
        {
          "lecturename": "module 2 lecture 1",
          "lecturepath": {
            "0": {}
          },
          "lecturedescription": "learn this lecture"
        }
      ]
    }
  ]
}

其中 lecturepath 包含文件。

我不知道如何配置 FormData 以将其发送回服务器。

到目前为止我有这个，但是这个当然不起作用

onSubmitNewCourse() {
    const formData = new FormData();
    formData.append('course', this.form.value);
    TODO:handle files
  }

非常感谢您的帮助:)

Answer 1

您确定您的文件以 Blob 或 Binary 形式正确附加到 formData 中吗？

对于 angular 解决方案，我不知道您的应用程序是什么样的，但我建议您为所有数据创建一个 formGroup，并可能创建一个服务以通过以下方式将您的文件上传到正确的课程模块上面代码中的 formData 和 blob

中的文件

如何发送多个文件 FormData，其中每个文件属于不同的 FormControl？

How to send multiple files FormData where each file belong to a different FormControl?

javascript

multipartform-data

angular

angular-forms