时间戳

首页 > 解决方案 > 使用 ReactJs 以编程方式在 Sharepoint 上上传文件

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

问题描述

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

问题陈述：- 我想使用 ReactJS 在 Sharepoint 中上传图像文件，作为响应，我想要返回图像的 Sharepoint URL，以便我可以保存在数据库中以在我的应用程序页面中显示这些图像。我正在开发一个网络应用程序，这个应用程序在团队下作为选项卡运行。

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

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

实施此操作后，我收到以下错误：-

TypeError：无法读取未定义 Settings.uploadFileFromControl src/components/Settings.jsx:656 的属性“getFolderByServerRelativeUrl”

  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 是否可以在团队应用程序下工作？

请帮助提前谢谢。

标签： javascriptreactjsfilesharepointmicrosoft-teams

解决方案

出现这个问题的原因应该是pnp js没有正确导入。

npm install sp-pnp-js --save

在命令栏中运行此命令。

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

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

推荐阅读