如何在 vue.js 中使用 Google-Picker-API 公开 Google Drive 文件

问题描述

我尝试制作一个 vue.js 网络应用程序，我想在谷歌驱动器上上传一个文件并使用 Google-Picker-API 将它们公开。我已经完成了上传部分，但问题是如何只公开这些文件。如何以编程方式实现。 这是我的文件链接 https://github.com/Aniruddh1998/Google-Picker-API-File-Upload

<template>
  <div id="app">
    <VueGPicker
      :clientId="'My_clientId'"
      :developerKey="'My_DeveloperKey'"
      :scope="['https://www.googleapis.com/auth/drive.file']"
      @change="onChange"
      @authenticated="onAuthenticated"
      :multiselect="true"
      :navHidden="false"
      :authImmediate="false"
      :upload="true"
      :mimeTypes="['image/png','image/jpeg','image/jpg']"
      :viewId="'DOCS'">
      <button>VueGPicker</button>
    </VueGPicker>
  </div>
</template>

<script>
import VueGPicker from './components/VueGPicker.vue'

export default {
  name: 'app',methods: {
    onChange (data) {
      window.console.log('on change:',data)
    },onAuthenticated (token) {
      window.console.log('oauth token:',token)
    }
  },components: {
    VueGPicker
  }
}
</script>


<template>
  <div @click="onChoose">
    <slot/>
    <button v-if="!this.$slots.default">Open google chooser</button>
  </div>
</template>


<script>
import loadScript from 'load-script'

const GOOGLE_SDK_URL = 'https://apis.google.com/js/api.js'

export default {
  props: {
    clientId: {
      type: String,required: true
    },developerKey: String,scope: {
      type: Array,default: function () {
        return ['https://www.googleapis.com/auth/drive.readonly']
      }
    },viewId: {
      type: String,default: 'DOCS' 
    },origin: String,createPicker: Function,authImmediate: {
      type: Boolean,default: false
    },multiselect: {
      type: Boolean,navHidden: {
      type: Boolean,upload: {
      type: Boolean,default: false,},disabled: {
      type: Boolean,mimeTypes: {
      type: Array
    }
  },data: () => ({
    scriptLoadingStarted: false
  }),mounted () {
    if(this.isGoogleReady()) {
      // Google Api is already exists
      // init immediately
      this.onApiLoad()
    } else if (!this.scriptLoadingStarted) {
      // load Google Api and the init
      this.scriptLoadingStarted = true
      loadScript(GOOGLE_SDK_URL,this.onApiLoad)
    } else {
      // is loading
    }
  },methods: {
    isGoogleReady () {
      return !!window.gapi
    },isGoogleAuthReady () {
      return !!window.gapi.auth
    },isGooglePickerReady () {
      return !!window.google.picker
    },onApiLoad () {
      window.gapi.load('auth')
      window.gapi.load('picker')
    },doAuth (callback) {
      window.gapi.auth.authorize({
          client_id: this.clientId,scope: this.scope,immediate: this.authImmediate
        },callback
      )
    },onChoose () {
      if (!this.isGoogleReady() || !this.isGoogleAuthReady() || !this.isGooglePickerReady() || this.disabled) {
        return
      }

      const token = window.gapi.auth.getToken()
      const oauthToken = token && token.access_token

      if (oauthToken) {
        this.defaultCreatePicker(oauthToken)
      } else {
        this.doAuth(({ access_token }) => this.defaultCreatePicker(access_token))
      }
    },pickerCallback (data) {
      this.$emit('change',data)
      switch (data.action) {
        case 'loaded':
          this.$emit('loaded')
          break
        case 'cancel':
          this.$emit('cancel')
          break
        case 'picked':
          this.$emit('picked',data.docs)
          break
        default: 
          break
      }
    },onAuthenticated (oauthToken) {
      this.$emit('authenticated',oauthToken)
    },defaultCreatePicker (oauthToken) {

      this.onAuthenticated(oauthToken)

      if(this.createPicker){
        return this.createPicker(window.google,oauthToken)
      }

      const googleViewId = window.google.picker.ViewId[this.viewId]
      const view = new window.google.picker.View(googleViewId)

      if (this.mimeTypes) {
        view.setMimeTypes(this.mimeTypes.join(','))
      }

      if (!view) {
        throw new Error('Can\'t find view by viewId')
      }

      const picker = new window.google.picker.PickerBuilder()
        .addView(view)
        .setoAuthToken(oauthToken)
        .setDeveloperKey(this.developerKey)
        .setCallback(this.pickerCallback)

      if (this.origin) {
        picker.setorigin(this.origin)
      }

      if (this.navHidden) {
        picker.enableFeature(window.google.picker.Feature.NAV_HIDDEN)
      }

      if (this.multiselect) {
        picker.enableFeature(window.google.picker.Feature.MULTISELECT_ENABLED)
      }

      if (this.upload) {
        picker.addView(new window.google.picker.DocsuploadView())
      }

      picker.build()
        .setVisible(true)
    }
  }
}
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）