Блог

Я новичок в использовании ReactJS, мне нужна помощь сообщества для решения моей проблемы.

Заявление о проблеме: — Я хочу загрузить файл изображения в Sharepoint с помощью ReactJS, и в качестве ответа я хочу вернуть URL-адрес Sharepoint для изображения, чтобы я мог сохранить в базе данных для отображения этих изображений на страницах моего приложения. Я разрабатываю веб-приложение, и это приложение работает на вкладке teams as.

Вот одна ссылка, которую я пробовал, но я не могу успешно реализовать.

http://siddharthvaghasia.com/2019/10/16/upload-file-to-sharepoint-library-using-file-control-and-pnp-js-in-spfx-webpart/

После реализации этого я получаю следующую ошибку:-

Ошибка типа: не удается прочитать свойство ‘getFolderByServerRelativeUrl’ с неопределенными настройками.uploadFileFromControl src/components/Settings.jsx:656

   653 | //var files = this._input.files;
  654 | //var file = files[0];
  655 | //Upload a file to the SharePoint Library`enter code here`
> 656 | sp.web.getFolderByServerRelativeUrl(this.props.context.pageContext.web.serverRelativeUrl)
      | ^  657 | //sp.web.getFolderByServerRelativeUrl(this.props.context.pageContext.web.serverRelativeUrl   "/MyDocs")
  658 | .files.add(file.name, file, true)
  659 | .then((data) =>{
  

Просмотр скомпилированного
FileReader.reader.onloadend
src/components/Settings.jsx:603

   600 | 
  601 | //console.log('fileVar[i].name '   reader.fileName);
  602 | 
> 603 | this.uploadFileFromControl(fileVar[i]);
      | ^  604 | 
  605 | logoImages.push({image: reader.result, name: reader.fileName});
  606 | this.setState({eventLogoImageUrl: JSON.stringify(logoImages)});
  

Я не понимаю, будет ли этот sp.web работать в приложении teams или нет?

Пожалуйста, помогите, заранее спасибо.

В основном вы получаете сообщение об ошибке, потому что ваш getFolderByServerRelativeUrl не получает никакого значения или не определен

Вам нужно использовать функцию, подобную этой, и вызвать эту функцию при нажатии кнопки

 private uploadFileFromControl() {
  //Get the file from File DOM
  var files = this._input.files;
  var file = files[0];
  //Upload a file to the SharePoint Library
var url = this.props.context.pageContext.web.serverRelativeUrl;
 pnp.sp.web.getFolderByServerRelativeUrl( url  "/FormServerTemplates")
    .files.add(file.name, file, true)
    .then((data) => {
      alert("File uploaded sucessfully");
    })
    .catch((error) => {
      alert("Error is uploading");
    });
}
  

При рендеринге используйте этот код рендеринга html

 return (
    <div className={ styles.maincontainer }>
      <input type="file" ref={(elm) => { this._input = elm; }}></input>
      <p>
      <button onClick={() => this.uploadFileFromControl()} >
                     Upload
                    </button>
                    </p>
    </div>
  
  );
  

Выполните эту команду

npm install sp-pnp-js —сохранить

Импорт sp-pnp-js

импорт * как pnp из ‘sp-pnp-js’;

Причиной этой проблемы должно быть то, что pnp js импортирован неправильно.

 npm install sp-pnp-js --save
  

Запустите эту команду в командной строке.

Официальный пример:
https://pnp.github.io/pnpjs/sp/files/#adding-files

Если вам нужна дополнительная помощь, пожалуйста, поделитесь полным кодом в файле tsx.