网站搜索

javascript - 如何从 Angular 上传文件以及数据到 .NET core

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

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

文件上传组件.html

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

文件控制器.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)，并得到了如下图所示的 File 值。我不确定这是否是正确的数据

这里出了什么问题？我真的没有主意了，也许花了这么多时间后我需要一些新的想法

答案＃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);
            }});
        }

答案＃2

当您发送二进制数据如文件时，必须以多部分表单数据的形式发送，请使用以下头信息

Content-Type: multipart/form-data;

在模型中，你应该将数据作为文件接收，而不是自定义接口 (IFormFile)

相关文章