SharePoint SPFX：无法获取属性“上下文”答案

【问题标题】：SharePoint SPFX: Unable to get property 'Context'SharePoint SPFX：无法获取属性“上下文”
【发布时间】：2020-02-26 22:42:04
【问题描述】：

我正在开发自定义 SPFX 命令集。它打开一个带有 iframe 的对话框到第 3 方平台。我可以通过 postmessage 接收 json。从这个json，我将它的数据转换为一个文件，它是正确的元数据。所有这一切都像一个魅力......除了......

现在我想将此文件上传到文档库，这让我抓狂。
我在参考：

import "@pnp/polyfill-ie11";
import { ConsoleListener, Logger, LogLevel } from "@pnp/logging";
import { sp } from "@pnp/sp";
import { Web } from "@pnp/sp/webs";
import "@pnp/sp/webs";
import "@pnp/sp/files";
import "@pnp/sp/folders";
import { Base64 } from 'js-base64';

在我的对话框组件中，我尝试使用 web.getFolderByServerRelativeUrl 上传文件。但是这个方法是失败的，我真的不明白为什么....查看pnp参考（https://pnp.github.io/pnpjs/sp/files/），似乎是正确的方法。

var file = Base64.atob(response.Data);
console.log("File length : " + file.length);
let web = Web("https://MyTenant.sharepoint.com/sites/Customer"); // this is successful 

await web.getFolderByServerRelativeUrl("/sites/Customer/Shared%20Documents/")
    .files.add(response.fileName, file, true); // this fails

上下文在 CommandSet onInit() 上设置

@override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, 'Initialized myCommandSet');
    pnpSetup({
      spfxContext: this.context
    });
    return Promise.resolve();
  }

希望你们能指出我正确的方向......

编辑：

错误：

HTTP400: INVALID REQUEST - The request could not be processed by the server
 due to an invalid syntax
POST - https://MyDevTenant.sharepoint.com/sites/customer/
_api/web/getFolderByServerRelativeUrl
('%2Fsites%2Customer%2FShared%2520Documents%2F')
/files/add(overwrite=true,url='')

是不是文档库中的 url 搞砸了？

【问题讨论】：

你确定response.fileName 有值吗？
是的，它有......它的长度也是 62824。我发布了错误的错误......我修复了它
该错误消息仍然显示add 方法的url 参数为空。此参数告诉 SharePoint 为您上传的二进制文件命名，以及为什么我询问您的 response.fileName 值。
要验证问题出在哪里，您可以拆分这些行 let destFolder = await web.getFolderByServerRelativeUrl("/sites/Customer/Shared%20Documents/"); console.log(destFolder); console.log(response.fileName); await destFolder.files.add(response.fileName, file, true); 这显然效率较低，因为它会进行两次单独的 REST 调用，但可以帮助调试。跨度>

标签： reactjs sharepoint spfx pnp-js

【解决方案1】：

感谢 Willman 给了我正确的方向。这成功了：

import { sp, Web, IWeb } from "@pnp/sp/presets/all";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/files";
import "@pnp/sp/folders";

const web = await sp.web();
const list = sp.web.getList("Documents");
const listId = await list.select("Id")();
await sp.web.lists.getById(listId.Id).rootFolder.files.add(docname, file, true);

【讨论】：