如何顯示 Google Drive 文件夾中的圖像？

Question

我正在建立一個測試網站。 在登錄確認中，我必須向考生展示他們的照片，這些照片已經保存在 Google Drive 文件夾中。

$optParams = array(
            'pageSize' => 1,
            'fields' => 'nextPageToken, files(contentHints/thumbnail,fileExtension,id,name,size)',
            'q' =>"mimeType contains 'image/' AND name contains '".$imageId."' AND '".$folderIdId."' in parents"
          );
          $results = $googleDriveService->files->listFiles($optParams);
          
        if (count($results->getFiles()) == 0) {
            print "No files found.\n";
        } else {
            print "Files:\n";
            foreach ($results->getFiles() as $file) {
                printf("%s (%s)\n", $file->getName(), $file->getId());
            }
        }

這是我用來獲取文件ID的。 現在為了將圖像預覽到頁面，我是否必須下載圖像（然后稍后將其刪除）才能顯示它，還是有其他方法可以在不下載的情況下做到這一點？

Answer 1

回答：

雖然雲端硬盤並非設計為托管平台，但您可以使用預覽鏈接作為解決方法。

更多信息：

我真的應該在這里重申：Drive 並非旨在成為圖像托管平台。 它主要是一個文件共享和雲存儲解決方案，但確實提供了通過預覽、查看和嵌入鏈接查看圖像的方法。

您可以使用以下鏈接，將[ID]替換為您的圖像 ID 以在頁面中嵌入或預覽圖像：

https://drive.google.com/uc?export=view&id=[ID]

注意：雖然這可行，但圖像加載速度會很慢，因為圖像托管不是 Drive 的 MO。 還有一個以嵌入形式提供的 iframe 選項：

<iframe src="https://drive.google.com/file/d/[ID]/preview" width="640" height="480"></iframe>

此 iframe 嵌入可從 Drive UI 獲得：

在drive.google.com雙擊您的圖像，並按照⋮ > Open in new window菜單項，在新打開的選項卡中按照⋮ > Embed item...菜單選項和 ZA598E4F26AFADF861ZEFDC47 代碼將打開.

我希望這對你有幫助！

Answer 2

這對我有用。 您需要遵循 GOOGLE DRIVE API 文檔。 此代碼獲取一個文件並將其上傳到谷歌驅動器。 將 URL 和“名稱”記錄在數據庫中，以便以后顯示圖像。 我在 express.js 中安裝了 multer 以幫助上傳多個圖像。

app.post('/api/uploadmultiple', uploader.any("files", 12),
    async (req, res, next) => {
    const scopes = [
      'https://www.googleapis.com/auth/drive'
    ];
    const stream = require('stream');
    const { google } = require('googleapis');
    const credentials = require('./google-credentials.json');
    let fileObject = req.files[0];
    let bufferStream = new stream.PassThrough();
    bufferStream.end(fileObject.buffer);

    const auth = new google.auth.JWT(
      credentials.client_email, null,
      credentials.private_key, scopes
    );

    const drive = google.drive({ version: "v3", auth });
    const fileName = req.files[0].originalname;
    const fileType = req.files[0].mimetype;

    var fileMetadata = {
      name: fileName, // file name that will be saved in google drive
    };

    var media = {
      mimeType: fileType,
      body: req.files[0].buffer, // Reading the file from our server
    };
    var petname = req.body.petname;
 
    // Uploading Single image to drive

    drive.files.create(
      {
        media: {
          mimeType: fileType,
          body: bufferStream
        },
        resource: {
          name: fileName,
          // if you want to store the file in the root, remove this parents
          parents: ['GET THIS ID FROM GOOGLE DRIVE']
        },
        fields: 'id',
      }).then(function (resp) {
        if (resp.data) {
          res.status(200).end("File uploaded");
          var fileLocation = "https://drive.google.com/uc?id=" + resp.data.id;
          console.log("Upload Success", fileLocation);
          db.addPet(petname, fileLocation);
          db.addImage(petname, fileName, fileLocation);
        }
        console.log(resp.data.id,'resp');
      }).catch(function (error) {
        console.log(error);
        res.status(500);
      })});