Google Drive API files.get无法获取大文件的imageMediaMetadata求助

我使用Angular/TypeScript开发应用，通过GAPI调用Google Drive的files.get接口获取文件链接与元数据时遇到以下问题：

• 当文件大小超过170-180MB时，接口返回结果中无法获取imageMediaMetadata对象（宽高值为0）
• 这类大文件无法通过浏览器或webViewLink进行在线预览
• 160MB左右的文件可正常获取元数据并预览

用到的代码 #

GoogleDriveService #

@Injectable({
  providedIn: 'root',
})
export class GoogleDriveService {
  private gapiInited = false;

  private readonly googleApiScriptUrl = 'https://apis.google.com/js/api.js';
  private readonly googleDriveApiName = 'client';
  private readonly DiscoveryDoc = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

  private readonly requestedFields = 'id,name,thumbnailLink,imageMediaMetadata,webContentLink';

  constructor() {
    this.loadScript();
  }

  public initGoogleDriveClient(): void {
    gapi.load(this.googleDriveApiName, () => this.initializeGapiClient());
  }

  public async initializeGapiClient() {
    await gapi.client.init({
      apiKey: environment.googleApiKey,
      discoveryDocs: [this.DiscoveryDoc],
    });
    this.gapiInited = true;
  }

  public async getFile(fileId: string): Promise<gapi.client.drive.FileResource> {
    if (!this.gapiInited) {
      throw new Error('Google Drive client is not initialized.');
    }

    const file = await gapi.client.drive.files.get({ fileId: fileId, fields: this.requestedFields });
    return file.result;
  }

  private loadScript(): void {
    // Load the Google Picker API from the Google Developer Console
    const googleApiScript = document.createElement('script');
    googleApiScript.src = this.googleApiScriptUrl;
    googleApiScript.onload = () => {
      gapi.load(this.googleDriveApiName, () => {
        this.gapiInited = true;
        this.initGoogleDriveClient();
      });
    };

    document.body.appendChild(googleApiScript);
  }
}

示例用法 #

protected onGooglePickerDocumentsSelected(documents: google.picker.DocumentObject[]): void {
    const imagesFormArray = this.formGroup?.controls.images;

    if (!imagesFormArray) {
      console.error('Images FormArray is not found in the formGroup');
      return;
    }

    const getFileTasks = new Array<Promise<void>>();

    documents.forEach((document: google.picker.DocumentObject) => {
      const imageFormGroup: FormGroup<ControlsOf<ProjectImage>> = ProjectForm.createProjectImageFormGroup({
        url: document['url'],
        googleFileId: document['id'],
        designationType: this.selectedImageDesignationType,
        name: document['name'],
        width: 0,
        height: 0,
      });

      imagesFormArray.push(imageFormGroup);

      const getFileTask = this.googleDriveService.getFile(document['id']).then((file) => {
        const imageWidth = file.imageMediaMetadata?.width;
        const imageHeight = file.imageMediaMetadata?.height;

        if (imageWidth && imageHeight) {
          imageFormGroup.get('width')?.setValue(imageWidth);
          imageFormGroup.get('height')?.setValue(imageHeight);
        } else {
          console.error('Image width or height is not found');
        }
      });

      getFileTasks.push(getFileTask);
    });

    Promise.all(getFileTasks).finally(() => {
      this._validateImageSizes.next();
      this.changeDetector.detectChanges();
    });
  }

问题原因与解决方案 #

这是Google Drive的内置限制：

1. 大尺寸图片文件不会触发Drive自动生成预览缩略图和元数据解析，imageMediaMetadata仅在Drive完成媒体处理后才会返回，而大文件的媒体处理会被系统限制
2. 在线预览功能同样存在隐性大小阈值，超过阈值的文件不会生成可预览的缓存版本

可行解决思路：

• 本地解析元数据：通过webContentLink下载文件到前端，使用canvas API或WebAssembly图片库（如sharp-wasm）解析宽高信息，注意需处理大文件的带宽和内存占用问题
• 检查文件处理状态：在files.get请求中添加processingState字段，若返回processing可等待后重试；若返回failed则提示用户使用小尺寸文件
• 适配共享驱动器：如果文件存储在共享驱动器中，可尝试添加supportsAllDrives: true参数，但无法突破大文件处理的核心限制

内容的提问来源于stack exchange，提问作者Marox