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

Question

我对 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.

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

Answer 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?

谢谢！！