Загрузите файл с помощью Angular 6 в Web Api C # - PullRequest
Новая
       32

Загрузите файл с помощью Angular 6 в Web Api C #

0 голосов
/ 04 декабря 2018

У меня есть приложение Angular CLI и веб-API Dot Net Core 2.0.который мне нужно загрузить файл из Angular в веб-API.с веб-API на сервер.Когда я использую Http, он работает нормально.При использовании HttpClient он не работает.Вот мой код component.ts: 

fileChange(event, grdvalue) {
debugger;
let fileList: FileList = event.target.files;
if (fileList.length > 0) {
  let file: File = fileList[0];
  const formData: FormData = new FormData();
  let GridName = grdvalue;

  formData.append('file', file, file.name);
  formData.append('Id', this.userId);
  formData.append('GridValue', GridName)

  this.myService.PostFileToAzure(formData).subscribe(details => {
    debugger;
  },
    (error) => {
      debugger;
    })
  }
 }

Вот мой код обслуживания: 

 PostFileToAzure(form) {
    debugger;
    var body = JSON.stringify(form);
    return this.http.post(this.baseApiURL + '/Interpretation/InterpreterFileUpload', form);
}

Вот мой код веб-API: 

[HttpPost("InterpreterFileUpload")]
    public async Task<IActionResult> InterpreterFileUpload()
    {
        try
        {

            var file = Request.Form.Files[0];
            HttpRequest formData = HttpContext.Request;
        }
    }

КакОтправьте файл с помощью HttpClient From Angular в Web API.Я получаю сообщение об ошибке в веб-API, например «Неверный тип содержимого: application / json»

Ответы [ 2 ]

0 голосов
/ 23 июля 2019

Я использовал решение @Elon Musk, но Request.Form.Files[0] дает мне исключение тайм-аута Evaluation, поэтому для его обработки я добавил параметр Iformfile в Actionmethod на стороне .net 

public IActionResult UploadFile(IFormFile formfile)
0 голосов
/ 06 декабря 2018

На угловом сайте используйте этот код 

file: any;

onSelectFile($event, file) {
    this.file = file;
  }


  uploadImage() {
    if (this.file.length === 0) {
      return;
    }

    const formData = new FormData();

    for (let file of this.file)
      formData.append(file.name, file);

    const uploadReq = new HttpRequest('POST', `api/FileUpload`, formData, {
      reportProgress: true,
    });

    this.http.request(uploadReq).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.progress = Math.round(100 * event.loaded / event.total);
      }
    });
  }

здесь onSelectFile должен вызываться при вводе, как этот 

<input #file type='file' multiple (change)="onSelectFile($event, file.files)">

А на вашем сайте asp.net используйте этот код 

[Produces("application/json")]
    [Route("api/[controller]")]
    public class FileUploadController : Controller
    {
    private IHostingEnvironment _hostingEnvironment;

    public FileUploadController(IHostingEnvironment hostingEnvironment)
    {
      _hostingEnvironment = hostingEnvironment;
    }

    [HttpPost, DisableRequestSizeLimit]
    public ObjectResult UploadFile()
    {
      try
      {
        var file = Request.Form.Files[0];
        string folderName = "Upload";
        string webRootPath = _hostingEnvironment.WebRootPath;
        string newPath = Path.Combine(webRootPath, folderName);
        if (!Directory.Exists(newPath))
        {
          Directory.CreateDirectory(newPath);
        }
        string fileName = "";
        if (file.Length > 0)
        {
          fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
          string fullPath = Path.Combine(newPath, fileName);
          using (var stream = new FileStream(fullPath, FileMode.Create))
          {
            file.CopyTo(stream);
          }
        }

        return Ok(fileName);
      }
      catch (System.Exception ex)
      {
        return BadRequest(ex.Message);
      }
    }
  }

Спасибо

...