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

【问题标题】：How to pass image from Angular(2/4) to in ASP.NET Core WebAPI server folder如何将图像从 Angular(2/4) 传递到 ASP.NET Core WebAPI 服务器文件夹
【发布时间】：2018-02-12 18:18:49
【问题描述】：

我的文件在 Angular 端的格式如下：

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 CORE 中的 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
}

提前致谢

【问题讨论】：

一般我们不会将Image作为Json格式发送，而是以muti-part的形式发送，使用stream-object可以将图像保存在服务器中
是的！我想通了。感谢您的回复:)

标签： angular file-upload asp.net-core asp.net-apicontroller

【解决方案1】：

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

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

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" />

【讨论】：