如何显示 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);
      })});