如何发出HTTP请求将文件从reactjs上传到googledrive?

2024-05-26

我对文档有点困惑。我做了我的研究,资源很少。也许有人可以帮助我。我正在使用 CRNA - create-react-app。我有一个按钮,可以使用 URI 将文件上传到 Google Drive。我已经有了 API 密钥、客户端 ID、启用 API(例如 Drive api)等初始步骤。我设法让 Google Picker 工作。但 Google Drive 上传却没有成功。

有一个嵌入 UI 的“保存到驱动器”按钮。只需复制粘贴,即可在纯 HTML 中工作。但我需要的是创建我自己的方法来执行上传过程。谢谢你们。


请使用以下步骤,希望对您有所帮助:

  1. 添加套餐yarn add react-google-picker进入你的项目,打包链接在这里 https://www.npmjs.com/package/react-google-picker
  2. 准备好您的 Google 开发者密钥、客户端 IDhttps://console.developers.google.com https://console.developers.google.com
  3. 实现如下代码:

注意:不要忘记使用以下代码中的密钥更改“YOUR_DEVELOPER_KEY_HERE”、“YOUR_CLIENT_ID_HERE”:

import React, {Component} from 'react';
import GooglePicker from 'react-google-picker';

class MyPage extends Component{
  render(){
   return (
      <GooglePicker clientId={'YOUR_CLIENT_ID_HERE'}
              developerKey={'YOUR_DEVELOPER_KEY_HERE'}
              scope={['https://www.googleapis.com/auth/drive.readonly']}
              onChange={data => console.log('on change:', data)}
              onAuthFailed={data => console.log('on auth failed:', data)}
              multiselect={true}
              navHidden={true}
              authImmediate={false}
              viewId={'DOCS'}
              mimeTypes={['image/png', 'image/jpeg', 'image/jpg']}
              createPicker={ (google, oauthToken) => {
                const googleViewId = google.picker.ViewId.DOCS;
                const uploadView = new google.picker.DocsUploadView();
                const docsView = new google.picker.DocsView(googleViewId)
                    .setIncludeFolders(true)
                    .setSelectFolderEnabled(true);

                const picker = new window.google.picker.PickerBuilder()
                .enableFeature(google.picker.Feature.SIMPLE_UPLOAD_ENABLED)
                  .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
                    .addView(docsView)
                    .addView(uploadView)/*DocsUploadView added*/
                    .setOAuthToken(oauthToken)
                    .setDeveloperKey('YOUR_DEVELOPER_KEY_HERE')
                    .setCallback((data)=>{
                      if (data.action == google.picker.Action.PICKED) {
                          var fileId = data.docs[0].id;
                          alert('The user selected: ' + fileId);
                          picker();
                      }
                    });
                picker.build().setVisible(true);
            }}>
            <span>Click here</span>
            <div className="google"></div>
        </GooglePicker>
     );
   }
}

export default MyPage

这就是它的样子;)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何发出HTTP请求将文件从reactjs上传到googledrive? 的相关文章

随机推荐