MeteorJs实现Google Drive文件选择上传至集合/S3的方案咨询

下面分步骤实现你需要的功能，涵盖Google认证、Drive文件选择、文件上传至Meteor集合/S3，以及前端展示的完整流程：

1. 基础配置 #

1.1 安装依赖包 #

在项目根目录执行命令：

meteor add accounts-google accounts-ui ostrio:files
npm install googleapis aws-sdk

• accounts-google/accounts-ui：快速实现Google OAuth登录
• ostrio:files：Meteor生态中常用的文件存储集合包
• googleapis：调用Google Drive API
• aws-sdk：上传文件至S3

1.2 配置Google API与项目参数 #

• 登录Google Cloud Console，创建新项目并启用Google Drive API
• 进入「API和服务」→「凭据」，创建「OAuth 2.0 客户端ID」，应用类型选「Web应用」，将你的Meteor应用URL（如http://localhost:3000）添加到「已授权的JavaScript来源」和「已授权的重定向URI」
• 复制生成的客户端ID、密钥，以及S3的密钥信息，写入项目根目录的settings.json：

{
  "oauth": {
    "google": {
      "clientId": "你的Google客户端ID",
      "secret": "你的Google客户端密钥"
    }
  },
  "AWS": {
    "accessKeyId": "你的S3 AccessKey",
    "secretAccessKey": "你的S3 SecretKey",
    "region": "你的S3区域",
    "bucket": "你的S3存储桶名"
  }
}

启动项目时加载配置：meteor --settings settings.json

2. 前端实现Google认证与Drive选择器 #

2.1 编写模板结构 #

在main.html中添加登录入口、文件选择按钮与展示区域：

<template name="main">
  {{#if currentUser}}
    <button id="openDrivePicker">选择Google Drive文件</button>
    <div class="file-list">
      {{#each files}}
        <div class="file-item">
          <a href="{{fileUrl}}" target="_blank">{{name}}</a>
        </div>
      {{/each}}
    </div>
  {{else}}
    {{> loginButtons}}
  {{/if}}
</template>

2.2 实现选择器逻辑 #

在client/main.js中处理模板事件与Drive选择器初始化：

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { FilesCollection } from 'meteor/ostrio:files';
import { Meteor } from 'meteor/meteor';

// 初始化文件集合（存储文件元数据或文件本身）
export const Files = new FilesCollection({
  collectionName: 'Files',
  allowClientCode: false, // 仅允许后端处理上传
});

Template.main.onCreated(function() {
  this.files = new ReactiveVar([]);
  // 加载用户已上传的文件
  Meteor.call('getUserFiles', (err, res) => {
    if (!err) this.files.set(res);
  });
});

Template.main.helpers({
  files() {
    return Template.instance().files.get();
  }
});

Template.main.onRendered(function() {
  // 动态加载Google Drive选择器脚本
  if (!window.google) {
    const script = document.createElement('script');
    script.src = 'https://apis.google.com/js/api.js';
    script.onload = () => window.gapi.load('picker', () => {});
    document.body.appendChild(script);
  }
});

Template.main.events({
  'click #openDrivePicker'(e, template) {
    const user = Meteor.user();
    if (!user?.services?.google?.accessToken) return;

    // 初始化Drive选择器
    const picker = new window.google.picker.PickerBuilder()
      .addView(window.google.picker.ViewId.DOCS)
      .setOAuthToken(user.services.google.accessToken)
      .setDeveloperKey('你的Google API密钥') // 在Cloud Console凭据中创建API密钥
      .setCallback((data) => {
        if (data.action === window.google.picker.Action.PICKED) {
          const file = data.docs[0];
          // 上传至Meteor集合，若传S3则调用uploadDriveFileToS3
          Meteor.call('uploadDriveFileToCollection', file.id, file.name, (err, res) => {
            if (!err) {
              const currentFiles = template.files.get();
              template.files.set([...currentFiles, res]);
            }
          });
        }
      })
      .build();
    picker.setVisible(true);
  }
});

3. 后端处理文件上传 #

3.1 上传至Meteor集合 #

在server/main.js中添加方法：

import { Meteor } from 'meteor/meteor';
import { Files } from '../client/main';
import { google } from 'googleapis';

Meteor.methods({
  async uploadDriveFileToCollection(fileId, fileName) {
    const user = Meteor.user();
    if (!user) throw new Meteor.Error('not-authorized', '请先登录');

    const drive = google.drive({ version: 'v3', auth: user.services.google.accessToken });
    // 获取文件可读流
    const fileStream = await drive.files.get({
      fileId,
      alt: 'media'
    }, { responseType: 'stream' });

    // 上传到Meteor Files集合
    const fileObj = await Files.load({
      file: fileStream.data,
      fileName,
      meta: { userId: user._id }
    });

    return {
      _id: fileObj._id,
      name: fileObj.name,
      fileUrl: fileObj.link()
    };
  },

  getUserFiles() {
    const user = Meteor.user();
    if (!user) return [];
    return Files.find({ 'meta.userId': user._id }).fetch().map(file => ({
      _id: file._id,
      name: file.name,
      fileUrl: file.link()
    }));
  }
});

// 配置文件下载权限
Files.allow({
  download(userId, file) {
    return file.meta.userId === userId;
  }
});

3.2 上传至S3存储桶 #

在server/main.js中添加S3上传相关方法：

import AWS from 'aws-sdk';

// 初始化S3客户端
const s3 = new AWS.S3({
  accessKeyId: Meteor.settings.AWS.accessKeyId,
  secretAccessKey: Meteor.settings.AWS.secretAccessKey,
  region: Meteor.settings.AWS.region
});

Meteor.methods({
  async uploadDriveFileToS3(fileId, fileName) {
    const user = Meteor.user();
    if (!user) throw new Meteor.Error('not-authorized', '请先登录');

    const drive = google.drive({ version: 'v3', auth: user.services.google.accessToken });
    const fileStream = await drive.files.get({
      fileId,
      alt: 'media'
    }, { responseType: 'stream' });

    // 上传到S3
    const uploadParams = {
      Bucket: Meteor.settings.AWS.bucket,
      Key: `user-files/${user._id}/${fileName}`,
      Body: fileStream.data,
      ACL: 'private' // 公开访问设为'public-read'
    };

    const result = await s3.upload(uploadParams).promise();

    // 存储文件元数据到Meteor集合
    const docId = Files.insert({
      name: fileName,
      s3Key: uploadParams.Key,
      meta: { userId: user._id }
    });

    return {
      _id: docId,
      name: fileName,
      fileUrl: result.Location // 私有文件需调用签名URL方法，见下方
    };
  },

  // 生成S3私有文件的临时访问URL
  getS3SignedUrl(fileKey) {
    const user = Meteor.user();
    if (!user) throw new Meteor.Error('not-authorized');
    return s3.getSignedUrl('getObject', {
      Bucket: Meteor.settings.AWS.bucket,
      Key: fileKey,
      Expires: 3600 // URL有效期1小时
    });
  }
});

4. 前端文件查看 #

• Meteor集合存储的文件：直接使用file.link()生成的URL，通过<a>或<iframe>展示
• S3存储的文件：
  • 公开文件：直接使用返回的S3 URL
  • 私有文件：调用getS3SignedUrl方法获取临时访问URL后渲染

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