我如何在反应中使用 MS 图形 API？

Posted 2023-02-27

【中文标题】我如何在反应中使用 MS 图形 API？

【英文标题】：How do i use the MS graph api in react?

【发布时间】：2021-10-02 19:10:53

【问题描述】：

我对 JS 和 React 完全陌生，我正在尝试使用我的 MS 自定义团队应用上传文件。

我找到了使它工作所需的信息，但我只是不明白如何在我的团队选项卡中使用它。

import React from 'react';
import './App.css';
import * as microsoftTeams from "@microsoft/teams-js";

class Tab extends React.Component 
  constructor(props)
    super(props)
    this.state = 
      context: 
    
  

  componentDidMount() 
    new Promise((resolve) => 
      microsoftTeams.getContext(resolve);
    )
      .then((context) => 
        this.setState( context );
        //var inputs 
        const queryParameters = new URLSearchParams( function: "getDocuments", input: '"'+ context.userPrincipalName + '"',);
        console.log(`userPrincipalName is '$context.Id'`);
        console.log(`teamName is '$context.teamName'`);
        console.log(`http://localhost/openims/json.php?$queryParameters`);
        return fetch(`http://localhost/openims/json.php?$queryParameters`);
      )
      .then((res) => res.json())
      .then((result) => this.setState( ...result ))
      .catch((error) => this.setState( error ))
      .finally(() => this.setState( isLoaded: true ));
  
  
  render()   
    const  error, isLoaded, name, age, city  = this.state;
    if (error) 
      return <div>Error: error.message</div>;
     else if (!isLoaded) 
      return <div>Loading...</div>;
     else 
      return (     
        <ul>
          <li>
            /* <a href="http://google.com" target="_blank" rel="noopener noreferrer">Your Link</a> */
            name age city
          </li>
        </ul>       
      );
    
  


export default Tab;

目前我正在使用 componentDidMount 从 URL 获取我需要的一些信息，但现在我需要弄清楚如何添加另一个 componentDidMount（我认为）来执行 PUT 并将文件上传到我的驱动器位置。最好是我的 MS 团队 onedrive 的驱动器位置。

所以我必须把这个放在某个地方：

PUT /me/drive/root:/FolderA/FileB.txt:/content
Content-Type: text/plain

The contents of the file goes here.

所以我实际上可以上传文件。我该怎么办？

【问题讨论】：

您在谈论 jquery 并将您的问题标记为此类，但您共享的代码是反应...

哦，我的错，我马上改

【参考方案1】：

您不能添加多个 componentDidMount() 方法，但是在成功回调中您可以调用另一个 API 来上传文件。 或者你可以在相同的 componentDidMount() 方法中调用 promise。

您也可以编写如下代码：

fetch('https://me/drive/root:/FolderA/FileB.txt:/', 
  method: 'PUT',
  body: fileContent
)
.then((response) => response.json())
.then((result) => 
  console.log('Success:', result);
)
.catch((error) => 
  console.error('Error:', error);
);

您可以参考以下文档： https://docs.microsoft.com/en-us/graph/api/driveitem-put-content?view=graph-rest-1.0&tabs=http#example-upload-a-new-file

类似问题参考网址： How do I upload a file with the JS fetch API?

谢谢！！

【讨论】：

me/drive/root:/FolderA/FileB.txt: 似乎不是一个平易近人的 URL，我正在使用此代码，但没有添加文件。

你能告诉我为了上传文件我必须去的真正平易近人的 URL 吗？也许像：openimstest.sharepoint.com/me/drive/root:/FolderA/FileB.txt: 或 teams.microsoft.com/me/drive/root:/FolderA/FileB.txt:

@7BitAscii - 请您创建一个 SharePoint/OneDrive 文件夹，复制它的 URL 并按照文档中提供的格式在 API 调用中使用。 docs.microsoft.com/en-us/graph/api/…