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

【问题标题】：Programmatically upload file on Sharepoint using ReactJs使用 ReactJs 以编程方式在 Sharepoint 上上传文件
【发布时间】：2021-01-16 23:17:27
【问题描述】：

我是 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：无法读取未定义的属性“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 是否可以在团队应用程序下运行？

请帮忙提前致谢。

【问题讨论】：

标签： javascript reactjs file sharepoint microsoft-teams

【解决方案1】：

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

npm install sp-pnp-js --save

在命令栏中运行此命令。

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

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

【讨论】：

【解决方案2】：

基本上你会收到错误，因为你的 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 --save

导入 sp-pnp-js

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

【讨论】：