从谷歌驱动器而不是本地机器上传文件答案

【问题标题】：upload files from google drive instead of local machine从谷歌驱动器而不是本地机器上传文件
【发布时间】：2021-08-10 14:54:52
【问题描述】：

有没有办法使用 javascript 将文件从谷歌驱动器上传到我的网站服务器（我正在使用 angular Ts 和sails Js），我试图找到一个解决方案，我锁定了谷歌选择器 api，但它只适用使用香草 javascript。

【问题讨论】：

标签： angular google-drive-api sails.js

【解决方案1】：

我得到了真正的解决方案：

app.components.ts ：

import { Component } from '@angular/core';
declare let gapi: any;
declare let google: any;

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
developerKey = 'your api key';
clientId = "your id"
scope = [
  'profile',
  'email',
  'https://www.googleapis.com/auth/drive'//insert scope here
].join(' ');
pickerApiLoaded = false;
oauthToken?: any;


loadGoogleDrive() {
    gapi.load('auth', { 'callback': this.onAuthApiLoad.bind(this) });
    gapi.load('picker', { 'callback': this.onPickerApiLoad.bind(this) });
  }

onAuthApiLoad() {
    gapi.auth.authorize(
      {
        'client_id': this.clientId,
        'scope': this.scope,
        'immediate': false
      },
      this.handleAuthResult);
  }

 onPickerApiLoad() {
    this.pickerApiLoaded = true;
    this.createPicker();
  }

createPicker() {
    if (this.pickerApiLoaded && this.oauthToken) {
      let picker = new google.picker.PickerBuilder().
          addView(google.picker.ViewId.DOCS).
          setOAuthToken(this.oauthToken).
          setDeveloperKey(this.developerKey).
          setCallback(this.pickerCallback.bind(this)).
          build();
      picker.setVisible(true);
    }
  }

pickerCallback(data : any) {
    let url = 'nothing';
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
      let doc = data[google.picker.Response.DOCUMENTS][0];
      url = doc[google.picker.Document.URL];
    }
    let message = 'You picked: ' + url;
    alert(message);
  } 





handleAuthResult(authResult : any) {
    let src;
    if (authResult && !authResult.error) {
      if (authResult.access_token) {
        let view = new google.picker.View(google.picker.ViewId.DOCS);
        view.setMimeTypes("image/png,image/jpeg,image/jpg,video/mp4");
        let pickerBuilder = new google.picker.PickerBuilder();
        let picker = pickerBuilder.
          enableFeature(google.picker.Feature.NAV_HIDDEN).
          setOAuthToken(authResult.access_token).
          addView(view).
          addView(new google.picker.DocsUploadView()).
          setCallback(function (e : any) {
            if (e[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
              let doc = e[google.picker.Response.DOCUMENTS][0];
              src = doc[google.picker.Document.URL];
              console.log("Document selected is", doc,"and URL is ",src)
            }
          }).
          build();
        picker.setVisible(true);
      }
    }
  }


}

app.components.ts ：

<button (click)="loadGoogleDrive()">G-Drive</button>

index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PickerAngular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>

  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

您需要注意在google控制台配置API时，请务必查看javascript授权链接

【讨论】：