У меня запущено приложение Angular 9, и я хотел реализовать поведение загрузки файлов. В форме пользователь должен ввести заголовок, описание и загрузить только один файл в формате .zip и, нажимая «Отправить», я хочу отправить значения формы вместе с файлами в Backend (используя dotnet) через http post call.

file-upload.component.ts

        uploadFile(files) {
            const formData = new FormData();
            const fileToUpload = files[0] as File;
            formData.append('file', fileToUpload, fileToUpload.name);
            const data = {
               title: this.form.value.Title,
               description: this.form.value.Description,
               File: formData
            };
            console.log(data);
            this.http.post('https://localhost:5001/api/idea/add', data).subscribe((response) => {
                console.log(response);
            }});
        }

< Сильный > файл - upload.component.html

<input type="file" #file placeholder="Choose file" (change)="uploadFile(file.files)" multiple>

FileController.cs

[HttpPost("api/idea/add")]
public async Task<IActionResult> AddIdea([FromBody] IdeaDto ideaDto) { }

Backend ожидает, что данные будут в следующем формате

IdeaDto.cs

public class IdeaDto
{
    public IFormFile File { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}

Я получаю ошибку ниже при отправке данных

enter image description here

Кроме того, я сделал console.log (data) и получил значение File, как показано на изображении ниже. Я не уверен, верные ли это данные

enter image description here

Что здесь не так? У меня действительно нет идей, может быть, мне нужны свежие мысли по этому поводу после того, как я потратил столько времени

2
Asif Zaidi 15 Ноя 2020 в 17:45

2 ответа

Лучший ответ

Взять из формы в api

[HttpPost("api/idea/add")]
public async Task<IActionResult> AddIdea([FromForm] IdeaDto ideaDto) { }

И в угловой форме заполнения данных, а не создания объекта

uploadFile(files) {
            const formData = new FormData();
            const fileToUpload = files[0] as File;
            formData.append('file', fileToUpload, fileToUpload.name);
            formData.append('title',this.form.value.Title);
            formData.append('description',this.form.value.Description);
            console.log(data);
            this.http.post('https://localhost:5001/api/idea/add', formData ).subscribe((response) => {
                console.log(response);
            }});
        }
2
pc_coder 15 Ноя 2020 в 15:02

Когда вы публикуете двоичные данные, такие как файлы, они должны публиковаться как данные, состоящие из нескольких частей, используйте следующий заголовок

Content-Type: multipart/form-data;

В модели вы должны получать данные как файл вместо пользовательского интерфейса (IFormFile)

1
Saravanan 15 Ноя 2020 в 14:51