admin 管理员组

文章数量: 1086019

I have running Angular 9 application and I wanted to implement File upload behavior. In the form, user has to enter title, description and upload only one file in .zip format and while clicking on Submit, I want to send the form values along with files to Backend (using dotnet) via http post call.

file-uploadponent.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-uploadponent.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 expects the data to e in below format

IdeaDto.cs

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

I am getting below error while submitting the data

Also, I did console.log(data) and got File value as shown in the below image. I am not sure whether this the correct data

What is wrong here? I'm really out of ideas, maybe I need a fresh thoughts on this after spending so much time

I have running Angular 9 application and I wanted to implement File upload behavior. In the form, user has to enter title, description and upload only one file in .zip format and while clicking on Submit, I want to send the form values along with files to Backend (using dotnet) via http post call.

file-upload.ponent.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.ponent.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 expects the data to e in below format

IdeaDto.cs

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

I am getting below error while submitting the data

Also, I did console.log(data) and got File value as shown in the below image. I am not sure whether this the correct data

What is wrong here? I'm really out of ideas, maybe I need a fresh thoughts on this after spending so much time

  • javascript
  • c#
  • angular
  • typescript
  • -core
Share Improve this question edited Nov 15, 2020 at 14:50 Asif Zaidi asked Nov 15, 2020 at 14:45 Asif ZaidiAsif Zaidi 1435 silver badges25 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

Take from form in api

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

and in angular fill formdata rather than create object

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

When you post binary data like files, they have to be posted as multi-part form data, please use the below header

Content-Type: multipart/form-data;

In the model, you should receive the data as File instead of a custom interface (IFormFile)

本文标签： javascriptHow to upload file along with data from Angular to NET coreStack Overflow

版权声明：本文标题：javascript - How to upload file along with data from Angular to .NET core - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744088496a2531587.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。