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

Question

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

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

这是一个参考[=37=]我已经试过了，但我无法成功实施。

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

请帮忙提前致谢。

Answer 1

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

npm install sp-pnp-js --save

运行这个命令在你的命令栏里。

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

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

Answer 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 安装 sp-pnp-js --保存

导入 sp-pnp-js

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

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

Programmatically upload file on Sharepoint using ReactJs

javascript

sharepoint

file

reactjs

microsoft-teams