Node.js上传文件至Google Cloud Storage报错问题求助

你的问题核心在于body-parser无法处理文件上传的multipart/form-data格式数据——它只能解析普通的文本表单字段，所以你拿到的只是浏览器发送的文件名，而非后端能读取的文件内容或有效临时路径。浏览器出于安全考虑，确实不会暴露本地文件的真实路径，因此我们需要用专门的中间件来处理文件上传，把文件转成后端可访问的资源，再传给Google Cloud Storage（GCS）。

下面是具体的解决方案，我提供两种常用的实现方式：

方法1：用Multer将文件存储到临时目录再上传到GCS #

Multer是Node.js中处理multipart/form-data最常用的中间件，它会把上传的文件保存到你指定的临时目录，之后你就可以用这个临时路径调用GCS的upload方法。

步骤： #

1. 首先安装Multer：

npm install multer

2. 配置Multer并修改后端代码：

const express = require('express');
const multer = require('multer');
const { Storage } = require('@google-cloud/storage');
const fs = require('fs');
const path = require('path');

const app = express();
const storage = new Storage();
const bucketName = '你的存储桶名称';

// 确保临时目录存在，避免报错
const tempDir = path.join(__dirname, 'temp');
if (!fs.existsSync(tempDir)) {
  fs.mkdirSync(tempDir);
}

// 配置Multer的临时存储规则
const multerStorage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, tempDir);
  },
  filename: (req, file, cb) => {
    // 保留原文件名，也可以自定义命名规则
    cb(null, file.originalname);
  }
});
const upload = multer({ storage: multerStorage });

// 修改路由，用multer中间件处理名为`image`的文件字段
app.post("/upload", upload.single('image'), async (req, res) => {
  try {
    // req.file包含上传文件的完整信息，path是临时文件的本地路径
    console.log('上传文件详情:', req.file);
    await storage.bucket(bucketName).upload(req.file.path, {
      destination: req.file.originalname, // 在GCS中保存的文件名
    });
    // 上传完成后删除临时文件，避免占用磁盘空间
    fs.unlinkSync(req.file.path);
    res.redirect("/upload");
  } catch (error) {
    console.error('上传失败:', error);
    res.status(500).send('上传出错，请重试');
  }
});

方法2：用Multer内存存储直接上传（适合小文件） #

如果你的文件体积不大（比如几MB以内），可以用Multer的内存存储模式，无需写入临时文件到磁盘，直接用文件缓冲区上传到GCS，效率更高。

代码示例： #

const express = require('express');
const multer = require('multer');
const { Storage } = require('@google-cloud/storage');

const app = express();
const storage = new Storage();
const bucketName = '你的存储桶名称';

// 配置内存存储
const multerStorage = multer.memoryStorage();
const upload = multer({ storage: multerStorage });

app.post("/upload", upload.single('image'), async (req, res) => {
  try {
    const file = req.file;
    // 获取GCS的文件对象
    const gcsFile = storage.bucket(bucketName).file(file.originalname);
    
    // 创建写入流，将内存中的文件缓冲区写入GCS
    const stream = gcsFile.createWriteStream({
      metadata: {
        contentType: file.mimetype, // 保留原文件的MIME类型
      },
    });

    stream.on('error', (err) => {
      console.error('流写入错误:', err);
      res.status(500).send('上传出错');
    });

    stream.on('finish', () => {
      console.log('文件成功上传到GCS');
      res.redirect("/upload");
    });

    // 写入文件缓冲区
    stream.end(file.buffer);
  } catch (error) {
    console.error('上传失败:', error);
    res.status(500).send('上传出错，请重试');
  }
});

关键注意事项： #

• 确保表单显式设置enctype="multipart/form-data"：<form action="/upload" method="POST" enctype="multipart/form-data">——虽然浏览器在包含文件输入时会自动设置，但显式声明更稳妥。
• 若使用方法1的临时目录，要保证Node.js进程有该目录的读写权限，上传完成后记得删除临时文件。
• 确认你的Google Cloud服务账号拥有存储桶的storage.objects.create权限，否则会出现上传权限不足的错误。

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