如何在Angular中将文件与数据一起上传到.NET Core

Question

我正在运行一个Angular 9应用程序，想要实现文件上传行为。在表单中，用户必须输入标题、描述信息并只上传一个.zip格式文件，在点击提交时，我想通过HTTP POST调用将表单值和文件一起发送到后端（使用dotnet）。

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);
            }});
        }

file-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) { }

后端期望数据的格式如下所示

IdeaDto.cs

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

提交数据时出现以下错误

另外，我使用 console.log(data) 并获得文件值，如下图所示。 我不确定这是否是正确的数据

问题在哪里？ 我真的没有任何想法，也许我需要一个新的想法，在经历了这么多时间之后

- Asif Zaidi

Answer 1

从API中获取表单数据

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

在 Angular 中，应该使用 FormData 填充表单数据而不是创建对象。

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);
            }});
        }

- mr. pc_coder

Answer 2

当您发布二进制数据（例如文件）时，它们必须作为多部分表单数据发布，请使用以下标头：

Content-Type: multipart/form-data;

在模型中，您应该将数据接收为文件而不是自定义接口（IFormFile）。

- Saravanan