如何发出HTTP请求以将文件从reactjs上传到Google驱动器？ [英] How to make HTTP request to upload file from reactjs to google drive?

问题描述

我对文档有些困惑。我做了研究，几乎没有资源。也许有人可以帮助我。我正在使用CRNA-create-react-app。我有一个按钮，该按钮想将使用URI的文件上传到Google云端硬盘。我已经有了诸如API密钥，客户端ID之类的初始步骤，启用了诸如Drive api之类的API。我设法使Google Picker正常工作。

有一个保存到驱动器按钮的嵌入式UI。只需复制粘贴，即可在纯HTML中使用。但是我需要创建自己的方法来执行上传过程。谢谢大家。

解决方案

请使用以下步骤，希望对您有所帮助：

1. 添加程序包 yarn将react-google-picker 添加到您的项目中，
   
   

   I'm kind of confused with the documentation. I did my research, little resources. Maybe someone can help me out. i'm using a CRNA - create-react-app. i have a button that suppose to upload a file using URI to Google Drive. I already have the initial steps like API key, client id, enable API like Drive api. I manage to make Google Picker work. but no luck with Google Drive upload.

   There is a save-to-drive button embedded UI. just copy paste, works in plain HTML. But what i need is to create my own method to execute the upload process. Thank you all.

   解决方案

   Please use following steps, I hope it will help:

   1. Add Package yarn add react-google-picker into your project, Package Link here
   2. Get your Google Developer Key, Client Id ready from https://console.developers.google.com
   3. Implement following code:

   Note: Do not forget to change 'YOUR_DEVELOPER_KEY_HERE', 'YOUR_CLIENT_ID_HERE' with your keys in following code:

   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
   

   This is how it looks ;)

   这篇关于如何发出HTTP请求以将文件从reactjs上传到Google驱动器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！