1

我正在考虑使用带有上传按钮的 php 或 html 表单将文件上传到 Google Team Drive。

我想知道是否有人使用 Google Picker API 取得了成功？如果是这样，请您分享您的解决方案。

这是我在 Google API 上引用的信息

感谢您的帮助！

4

1 回答 1

1

经过数小时的反复试验，我得到了它的工作。

我的代码发布在下面。
请记住在 OAuth 设置中设置您的 URL
这些是我使用 MAMP 的：
http://localhost:8888
http://localhost:8888/printing-forms/custom-stationery

TEAM DRIVE ID 在 Team Drive URL 中找到

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google File Upload for Custom Stationary Orders</title>

        <script type="text/javascript">

    // The Browser API key obtained from the Google API Console.
    // Replace with your own Browser API key, or your own key.
    var developerKey = '[your API key]';

    // The Client ID obtained from the Google API Console. Replace with your own Client ID.
    var clientId = "[your Client ID]"

    // Replace with your own project number from console.developers.google.com.
    // See "Project number" under "IAM & Admin" > "Settings"
    var appId = "[your project number]";

    // Scope to use to access user's Drive items.
    var scope = ['https://www.googleapis.com/auth/drive.file'];

    var pickerApiLoaded = false;
    var oauthToken;

    // Use the Google API Loader script to load the google.picker script.
    function loadPicker() {
      gapi.load('auth', {'callback': onAuthApiLoad});
      gapi.load('picker', {'callback': onPickerApiLoad});
    }

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

    function onPickerApiLoad() {
      pickerApiLoaded = true;
      createPicker();
    }

    function handleAuthResult(authResult) {
      if (authResult && !authResult.error) {
        oauthToken = authResult.access_token;
        createPicker();
      }
    }

    // Create and render a Picker object for searching images.
    function createPicker() {
      if (pickerApiLoaded && oauthToken) {
      //  var view = new google.picker.View(google.picker.ViewId.DOCS);
      //  view.setMimeTypes("pdf");
        var picker = new google.picker.PickerBuilder()
          .enableFeature(google.picker.Feature.SUPPORT_TEAM_DRIVES)
            // Hide list of files on the Drive
          .enableFeature(google.picker.Feature.MINE_ONLY)
            // Hide the Upload option for Personal Drive
            // .enableFeature (google.picker.Feature.NAV_HIDDEN)
            .addView(new google.picker.DocsUploadView()
            // Custom Stationary Folder
            .setParent('[Team Drive ID from URL]'))

          .addView(new google.picker.DocsView(google.picker.ViewId.DOCS)
            .setEnableTeamDrives(true)
            .setSelectFolderEnabled(false)
            // Upload files to Custom Stationary Folder
            .setParent('[Team Drive ID from URL]'))
            // Select more than one file
            // .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
            .setAppId(appId)
            .setOAuthToken(oauthToken)
            // Displays Personal Drive folder
            // .addView(view)

            .setDeveloperKey(developerKey)
            .setCallback(pickerCallback)
            .build();
         picker.setVisible(true);
      }
    }

    // A simple callback implementation.
    function pickerCallback(data) {
      if (data.action == google.picker.Action.PICKED) {
        var fileId = data.docs[0].name;
          // Show the ID of the Google Drive folder
          document.getElementById('result').innerHTML = fileId + ' has been successfully uploaded';
      //    location.reload();
      //  alert('The user selected: ' + fileId);
      }
    }
    </script>
  </head>
  <body>
    <div id="result"></div>
    <div id="continue"><a href="http://localhost:8888/printing-forms/custom-stationery/">Back to the Order Form</a></div>

    <!-- The Google API Loader script. -->
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=loadPicker"></script>
  </body>
</html>
于 2018-12-05T14:55:40.477 回答