如何将图像从 Angular(2/4) 传递到 ASP.NET Core WebAPI 服务器文件夹中

Question

我的文件格式如下 Angular end:

let fi = this.fileInput.nativeElement;
let fileToUpload = fi.files[0];

let input = new FormData();
input.append("file", fileToUpload);

return this.http.post(uploadUrl, input);

而我在 ASP.NET 核心中的 API 是：

[HttpPost]
public IActionResult Post([FromBody]JObject objData)
{
    dynamic jsonData = objData;
    JObject FileJson = jsonData.jsonFile; // JSON File

    // Please suggest how to store the file in Folder
}

提前致谢

Answer 1

我想通了。所以我发布了答案，以便它可以帮助其他人。

这是我在 ASP.NET Core API Controller 中的完整代码：

public class FileUploadController : Controller
{
    private IHostingEnvironment _env;
    public FileUploadController(IHostingEnvironment env)
    {
        _env = env;
    }
    [HttpPost]
    public IActionResult Upload(IFormFile file)
    {

        long size = 0;

            var filename = ContentDispositionHeaderValue
                            .Parse(file.ContentDisposition)
                            .FileName
                            .Trim('"');


        var webRoot = _env.WebRootPath;

        var filePath = webRoot + "/Uploads" + $@"/{ filename}";

        bool fileExists = (System.IO.File.Exists(filePath) ? true : false);

        if (fileExists)
        {
            Random random = new Random();
            var randomNum = random.Next(99999);
            filename = randomNum +filename;
            filePath = webRoot + "/Uploads" + $@"/{ filename}";
        }
        size += file.Length;
            using (FileStream fs = System.IO.File.Create(filePath))
            {
                file.CopyTo(fs);
                fs.Flush();
            }
        return Ok(filename);
    }
}

这在我的图片上传服务中Angular：

export class UploadService {
   constructor(private http: Http) { }

   public upload = function (fileToUpload: any, uploadUrl) {

     let input = new FormData();
     input.append("file", fileToUpload);

     return this.http.post(uploadUrl, input);
   }
}

这是我在 Angular 组件中的 documentSubmit 函数 :

import { UploadService } from './Upload.service';

constructor(private http: Http,private uploadService: UploadService) { }

@ViewChild("fileInput") fileInput;

onDocumentSubmit = function () {

  let fi = this.fileInput.nativeElement;

  if (fi.files && fi.files[0]) {

  let fileToUpload = fi.files[0];

  this.uploadService.upload(fileToUpload, ConstantComponent.url + "/FileUpload")
    .subscribe(data => {

      let documentDetails = {
        PodId: this.podId,
        DocumentName: fileToUpload.name,
        DocumentPath: ConstantComponent.port + "/Uploads/" + data._body,
      }
      this.http.post(ConstantComponent.url + "/DocumentManagerAPI/Add", documentDetails, options)
        .map((res: Response) => res.json()).subscribe(
        data => {
          console.log("success")

        }, error => {
          console.log("error")

        });
    });
  }
}

这是我的文件输入 HTML :

<input #fileInput type="file" name="document" [(ngModel)]="document" />

如何将图像从 Angular(2/4) 传递到 ASP.NET Core WebAPI 服务器文件夹中

How to pass image from Angular(2/4) to in ASP.NET Core WebAPI server folder

file-upload

asp.net-apicontroller

asp.net-core

angular