Question

我正在使用在本地// 4200上运行的angular4.2 cli和运行Local // 62567的asp.netCore。

在我启动的asp.net核心课程中，我允许：

//add cors service
services.AddCors(options => options.AddPolicy("Cors",
                builder => {
                    builder.AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader();
                 );

当我发送我的帖子请求时，我得到了这个：

:65223/api/Net:1 POST http://localhost:65223/api/Net 500 (Internal Server Error

XMLHttpRequest cannot load http://localhost:65223/api/Net. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 500.

然后我在回复中添加了以下标题：

'Access-Control-Allow-Origin:*'

我在我的控制器上启用了cors，但我是javascript的新手，并使用http通过apis传输文件。我很困惑这是做什么的最佳方法。在处理二进制类型时，最好发送一个表单或二进制字节数组。两种不同的语言如何知道文件在任何给定时间包含的确切内容。我要在下面发布我的代码，谢谢你抽出时间来阅读这篇文章。

净

[EnableCors("Cors")]
[HttpPost]
public async Task<IActionResult> Post(ICollection<IFormFile> files)
{

     var uploader= Path.Combine(_environment.WebRootPath, "Uploads");

     foreach (var file in files)
     {
         if (file.Length > 0)
         {
             using (var fileStream = new FileStream(Path.Combine(uploader, file.FileName), FileMode.Create))
             {
                 await file.CopyToAsync(fileStream);
             }
          }
      }
      return Created(uploader, files);

}

Angular4.2 +

成分：

@Component({
    selector: 'new-upload',
    template: `


    <mat-card class="card">
    <mat-card-content>

        <mat-form-field>
            <input matInput [(ngModel)]="message.owner" placeholder="Name">
         </mat-form-field>

        <input type="file" name="file" (change)="getFiles($event)"> 


      <mat-card-actions>
        <button (click)="post()" mat-raised-button color="primary">POST</button> 
      </mat-card-actions> 

    </mat-card-content>
    </mat-card>  

`
})


export class UploadComponent {

   constructor(private uploadService: UploadService) {}

   files : FileList; 

   getFiles(event){ 
       this.files = event.target.files; 
       this.message.img = event.target.files;//injected new file from server
   } 

   logForm(event) { 
        console.log(this.files); 
   } 

   message = {
       owner: '',
       img:FileList  //made new file list t
   }

   post() {
      this.uploadService.postMessages(this.message);
      console.log(this.message)
      console.log(this.message.text)
   }

}

Answer 1

每当您使用文件时，必须先将表单值编码为FormData，然后再将其发布到服务器。请考虑以下代码，例如

let formData = new FormData();
formData.append("files", this.files);

this.uploadService.post(formData).subscribe();

在MVC / Razor页面中，表单属性enctype='multipart/form-data'会自动将您的表单值编码为FormData。但是在Angular / Ajax中，你必须自己做编码部分，它会通过http发送整个文件（你不必将它转换为二进制类型数组）。

服务器仅在您通过http发布时才知道该文件。发布后，您可以检查IFormFile的不同属性（它基本上代表整个文件），以了解文件的确切内容。

在客户端，如果您想知道文件的确切内容，可以使用FileReader API来读取文件内容。

将文件类型从angular4发送到asp.netcore的正确方法是什么？

净

Angular4.2 +

1 个答案: