使用 ng2-Uploader (Angular2) & .net core 上传文件

Question

使用 ng2-Uploader (Angular2) & .net core 上传文件

ami*_*n89 4 file-upload asp.net-web-api angular

我需要一些帮助才能在 Visual Studio 2015 .net Core、Angular 2 和 Typescript 上使用 ng2-uploader 库和 Web API 上传文件。

POST 请求没问题，但我的控制器返回_null_.

这是我的文件：

上传.component.ts

import {
    Component
} from '@angular/core';

@Component({
    selector: 'app-upload',
    templateUrl: './app/upload/upload.component.html'
})
export class UploadComponent {
    uploadFile: any;
    hasBaseDropZoneOver: boolean = true;
    options: Object = {
        url: 'http://localhost:65000/customersImport',
    };
    sizeLimit = 2000000;

    handleUpload(data): void {
        if (data && data.response) {
            data = JSON.parse(data.response);
            this.uploadFile = data;
        }
    }

    fileOverBase(e: any): void {
        this.hasBaseDropZoneOver = e;
    }

    beforeUpload(uploadingFile): void {
        if (uploadingFile.size > this.sizeLimit) {
            uploadingFile.setAbort();
            alert('File is too large');
        }
    }
};

Run Code Online (Sandbox Code Playgroud)

上传.component.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body>
  <input type="file" ngFileSelect [options]="options" (onUpload)="handleUpload($event)"
    (beforeUpload)="beforeUpload($event)">

  <!-- drag & drop file example-->
  <style>
    .file-over {
      border: dotted 30px red;
    }
    /* Default class applied to drop zones on over */

  </style>
  <div ngFileDrop [options]="options" (onUpload)="handleUpload($event)" [ngClass]="{'file-over': hasBaseDropZoneOver}"
    (onFileOver)="fileOverBase($event)" (beforeUpload)="beforeUpload($event)">
  </div>

  <div>
    Response: {{ uploadFile | json }}
  </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

上传控制器.cs

[Route("[controller]")] 
public class CustomersImportController: Controller 
{
  private readonly IHostingEnvironment _environment;
  public CustomersImportController(IHostingEnvironment environment) 
  {
     _environment = environment;
  }

  [HttpPost] 
  public async Task<ActionResult> UploadCustomers(IFormFile file) 
  {
     var uploads = Path.Combine(_environment.WebRootPath, "uploads");
     try {
           if (file.Length > 0) 
           {
             using(var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create)) 
             {
                await file.CopyToAsync(fileStream);
             }
           }
           return Json("File was Uploaded");
         } 
         catch ()
         { 
             return null;
         }
  }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Pie*_*lli 5

如果IFormFile file作为动作参数使用，则只能上传一个文件，且参数名称（输入的名称）必须为'file'。不幸的是，我不知道如何使用 ng2-uploader 进行设置。

我想您可以使用数组作为参数来上传多个文件。

我还没有将它与 ng2-uploader 一起使用，但我会的。我会和你保持联系:)

编辑：稍微玩一下后，您可以在上传器的选项中设置字段名称，默认名称为file. 我只逐个文件上传并且它可以使用IFormFile file，但是如果您想上传多个文件，我认为您只需使用IFormFile[] file. 当然，如果您想使用IFormFile[] files，请不要忘记更改选项中的名称；)

归档时间：	8 年，8 月前
查看次数：	2529 次
最近记录：	6 年，11 月前

使用 ng2-Uploader (Angular2) &amp; .net core 上传文件

使用 ng2-Uploader (Angular2) & .net core 上传文件