使用Google Drive API v3上传大文件时如何显示上传进度？

原来的onUploadProgress事件已经被废弃并忽略，直接传入buffer也没法监控上传进度，这里给你两套可行的方案：

方案一：基于流的data事件统计进度 #

适合不想依赖底层axios配置的场景，核心是把buffer转成可读流，通过监听流的data事件统计已上传字节：

const { Readable } = require('stream');
// drive: drive_v3.Drive

// 把buffer转为可读流
const fileStream = Readable.from(buffer);
const totalBytes = buffer.length;
let uploadedBytes = 0;

// 监听流的data事件统计进度
fileStream.on('data', (chunk) => {
  uploadedBytes += chunk.length;
  const progress = (uploadedBytes / totalBytes) * 100;
  console.log(`上传进度：${progress.toFixed(2)}%`);
});

// 调用Drive API上传
const response = await this.drive.files.create({
  media: {
    mimeType: '你的文件MIME类型', // 必须指定，比如'image/jpeg'、'application/pdf'
    body: fileStream
  },
  fields: 'id'
});

方案二：利用axios的onUploadProgress监听进度 #

googleapis底层基于axios实现，我们可以通过请求配置传入axios的onUploadProgress（注意不是googleapis废弃的那个事件），大文件推荐配合resumable上传类型使用，能准确获取总字节数：

// drive: drive_v3.Drive

const fileStream = Readable.from(buffer);

const response = await this.drive.files.create({
  media: {
    mimeType: '你的文件MIME类型',
    body: fileStream
  },
  fields: 'id',
  uploadType: 'resumable' // 开启可恢复上传，大文件必备
}, {
  // 这里是axios的配置，有效监听上传进度
  onUploadProgress: (ev) => {
    if (ev.total) {
      const progress = (ev.loaded / ev.total) * 100;
      console.log(`上传进度：${progress.toFixed(2)}%`);
    }
  }
});

注意事项 #

• 必须指定正确的mimeType，否则会导致上传失败或进度统计异常
• 大文件优先用方案二，resumable上传不仅支持断点续传，还能让ev.total正确返回总字节数
• 如果不用resumable，方案一中的流事件统计是更可靠的选择，因为此时axios无法获取总字节数

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