Как передать файл (содержимое) из приложения Angular 5 в C # .NET Web Api 2? - PullRequest
Новая
       11

Как передать файл (содержимое) из приложения Angular 5 в C # .NET Web Api 2?

0 голосов
/ 03 июля 2018

Итак, у меня есть приложение Angular 5 с таблицей данных Angular Material. Когда пользователь нажимает «комментарии», появляется диалоговое окно, где пользователь может увидеть некоторые данные из выбранной строки, ввести несколько комментариев и загрузить файл. При нажатии кнопки «Сохранить» некоторое содержимое этого диалога должно быть отправлено на мой C # .NET Web Api 2. Как я могу это сделать? Пока у меня есть следующее:

Компонент диалога HTML: 

<div>
    <label for="file-input">Comments File: </label>
    <input #fileToUpload id="file-input" type="file" [(ngModel)]="EADModal.commentsFile">
  </div>

Компонент диалога TS (соответствующая часть): 

fileToUpload;

@ViewChild('fileToUpload') set setFileToUpload(fileToUpload: ElementRef) {
    this.fileToUpload = fileToUpload;
  }  

save() {
    // Some data has been removed for this code sample
    const json: any = {
      'Tenant': '',
      'Username': '',
      'Password': '',
      'SC_title': '',
      'SC_siteRelativeUrl': '',
      'L_title': '',
      'DS_subsequentFolderNames': [
        ...
      ],
      'File': this.fileToUpload.nativeElement.files[0]
    };

    const postModalDataSubscribe = this.tableService.postModalData(json).subscribe(res => {
      console.log('modal data posted success!');
    });
    this.modalRef.close();

Переменная this.fileToUpload будет содержать ссылку на элемент HTML-элемента. this.fileToUpload.nativeElement.files[0] будет содержать мой файл, как показано здесь в инструментах разработчика:

enter image description here

Затем я передаю объект вместе с файлом в мою службу, показанную здесь: 

public postModalData(jsonStringified: string) {
    return this.http.post('http://localhost:49836/listitem/CreateListItemSubsequentFolders', jsonStringified, httpOptionsWithCredentials);
  }

Это в конечном итоге входит в мой API (пока работает на localhost), код можно увидеть здесь: 

    [HttpPost]
    [Route("listItem/CreateListItemSubsequentFolders")]
    public IHttpActionResult CreateListItemSubsequentFolders([FromBody] ListItemForm data)
    {
         ....
    }

Теперь, когда я вижу, что в data, я вижу, что все мои другие свойства (арендатор, имя пользователя, пароль и т. Д.) Находятся в data, поэтому в моем коде я могу сделать 

var test = data.Tenant;

Переменная «test» будет содержать значение, значение из моего внешнего свойства json 'Tenant'. Теперь я хочу, чтобы то же самое произошло с моим data.File. Как я могу получить файл в своем объекте данных, чтобы я мог написать с ним код и передать этот файл во внутреннюю службу, чтобы загрузить его куда-нибудь (используя MemoryStreams, не сохраняя его локально и загружая его таким образом)?

Кто-нибудь знает, что мне нужно изменить, чтобы я мог получить свой файл (содержимое) в своем API / объекте данных, чтобы я мог передать его во внутреннюю службу?

1 Ответ

0 голосов
/ 03 июля 2018

Вы можете использовать formData для загрузки файлов. 

const formData = new FormData();

    // add the files
formData.append('file', file));  // this.fileToUpload.nativeElement.files[0]

    // you can add json data to form data if you want.
formData.append('data', jsonData , {type: 'application/json'}));

this.http.post<ResponseInterface>(this.apiUrl, formData);
...