gpt4 book ai didi

javascript - 如何将文件连同数据从 Angular 上传到 .NET Core

转载 作者:行者123 更新时间:2023-12-05 01:33:04 26 4
gpt4 key购买 nike

我已经运行了 Angular 9 应用程序,我想实现文件上传行为。在表单中,用户必须输入标题、描述和仅上传一个 .zip 格式的文件,同时单击提交,我想将表单值连同文件一起发送到后端(使用 dotnet) http 后调用。

文件上传.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; }
}

提交数据时出现以下错误

enter image description here

此外,我执行了 console.log(data) 并获得了文件值,如下图所示。我不确定这是否是正确的数据

enter image description here

这里有什么问题?我真的没有想法,也许在花了这么多时间之后我需要对此有新的想法

最佳答案

从 api 中的表单中获取

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

并在 Angular 填充表单数据而不是创建对象

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

关于javascript - 如何将文件连同数据从 Angular 上传到 .NET Core,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64845769/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com