Загрузите файлы в SharePoint Online с помощью SPHttpClient в веб-части spfx - PullRequest
Новая
       73

Загрузите файлы в SharePoint Online с помощью SPHttpClient в веб-части spfx

0 голосов
/ 31 августа 2018

Я пытаюсь загрузить файл с помощью SPHttpClient в веб-часть spfx.

код, который я пытаюсь это 

const spOpts:ISPHttpClientOptions={body: { my: "bodyJson" } };

contextDetails.spHttpClient.post(url,SPHttpClient.configurations.v1, spOpts) 
       .then(response => { 
          return response; 
        }) 
      .then(json => { 
        return json; 
      }) as Promise<any>

Но я не уверен, как добавить содержимое файла в этот httpClient API.

Полагаю, нам нужно добавить содержимое файла в spOpts в параметре body. Хотя я не уверен.

Любая помощь приветствуется. Благодаря.

1 Ответ

0 голосов
/ 02 сентября 2018

Предполагается, что вы используете и введите тег файла, как показано ниже: 

<input type="file" id="uploadFile" value="Upload File" />

<input type="button" class="uploadButton" value="Upload" />

Затем вы можете зарегистрировать обработчик uploadButton, как показано ниже: 

private setButtonsEventHandlers(): void {    
    this.domElement.getElementsByClassName('uploadButton')[0].
    addEventListener('click', () => { this.UploadFiles(); });
}

Теперь в методе UploadFiles вы можете добавить содержимое файла и другие необходимые заголовки. Кроме того, предполагая, что вы загружаете файл в библиотеку документов, вы можете использовать приведенный ниже фрагмент, чтобы загрузить файл в него. Измените его в соответствии с URL вашего сайта и именем библиотеки doc: 

var files = (<HTMLInputElement>document.getElementById('uploadFile')).files;
//in case of multiple files,iterate or else upload the first file.
var file = files[0];
if (file != undefined || file != null) {
  let spOpts : ISPHttpClientOptions  = {
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json"
    },
    body: file        
  };

  var url = `https://<your-site-url>/_api/Web/Lists/getByTitle('Documents')/RootFolder/Files/Add(url='${file.name}', overwrite=true)`

  this.context.spHttpClient.post(url, SPHttpClient.configurations.v1, spOpts).then((response: SPHttpClientResponse) => {

    console.log(`Status code: ${response.status}`);
    console.log(`Status text: ${response.statusText}`);

    response.json().then((responseJSON: JSON) => {
      console.log(responseJSON);
    });
  });

}
...