使用ReactJs以编程方式在Sharepoint上上传文件

如何解决使用ReactJs以编程方式在Sharepoint上上传文件

我是使用ReactJS的新手，我需要社区帮助来解决我的问题陈述。

问题陈述：-我想使用ReactJS在Sharepoint中上传图像文件，作为响应，我想返回图像的Sharepoint URL，这样我可以保存在数据库中以在应用程序页面中显示那些图像。我正在开发一个Web应用程序，并且此应用程序作为标签在团队下运行。

这是我尝试过的一个参考链接，但无法成功实现。

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

实施此操作后，出现以下错误：-

TypeError：无法读取未定义的属性'getFolderByServerRelativeUrl' Settings.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是否可以在团队应用程序下正常工作？

请帮助预先感谢。

解决方法

此问题的原因应该是pnp js未正确导入。

npm install sp-pnp-js --save

在命令栏中运行此命令。

官方示例：
https://pnp.github.io/pnpjs/sp/files/#adding-files

如果您需要进一步的帮助，请共享tsx文件中的完整代码。

基本上你收到错误是因为你的 getFolderByServerRelativeUrl 没有得到任何值或未定义

你需要像这样使用这个函数并在按钮点击时调用这个函数

networkx.watts_strogatz_graph

在渲染中使用这段html渲染代码

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");
    });
}

运行此命令

npm install sp-pnp-js --save

导入 sp-pnp-js

从'sp-pnp-js'导入*为pnp；