Мой объект «uploadData» не показывает информацию, переданную ему, а просто показывает «FormData {}» на консоли

Question

Я хочу загрузить файл и, таким образом, создать новый объект, который я хочу передать на сервер с именем «uploadData». Я хочу добавить значения в этот объект из объекта «uploadForm», который создается с помощью конструктора угловых форм. Но на консоли он просто показывает «FormData {}».

const uploadData = new FormData();
        this.uploadData.append("name", this.uploadForm.value.name);
        this.uploadData.append("sem", this.uploadForm.value.sem);
        this.uploadData.append("subject", this.uploadForm.value.subject);
        this.uploadData.append("material", this.uploadForm.value.material);
        this.uploadData.append("id", this.userId);
        this.uploadData.append("pdf",this.uploadForm.value.pdf, this.uploadForm.value.name);
        //this.updown.upload(this.uploadData).subscribe()
        console.log(this.uploadData);

Форма конструктора

uploadForm = this.fb.group({
name: ['', Validators.required],
sem: ['', Validators.required],
subject: ['', Validators.required],
material: ['', Validators.required],
pdf: ['', Validators.required]
});

PDF это файл так:

onImagePick(event: Event){
const file = (event.target as HTMLInputElement).files[0];
this.uploadForm.patchValue({ pdf : file });
this.uploadForm.get('pdf').updateValueAndValidity();
}

Answer 1

Вы используете this.updown.upload(this.uploadData), но объявляете его как const uploadData.Удалите ключевое слово this, и все будет в порядке.

Для другой проблемы, FormDatas являются неизменяемыми, это означает, что append возвращает новый экземпляр данных формы.

Попробуйте использовать этот код вместо:

const uploadData = new FormData()
    .append("name", this.uploadForm.value.name)
    .append("sem", this.uploadForm.value.sem)
    .append("subject", this.uploadForm.value.subject)
    .append("material", this.uploadForm.value.material)
    .append("id", this.userId)
    .append("pdf",this.uploadForm.value.pdf, this.uploadForm.value.name);

    //this.updown.upload(this.uploadData).subscribe()
    console.log(this.uploadData);