使用Firebase Functions上传Base64图片至云存储报错排查

核心问题分析 #

你遇到的SyntaxError: Unexpected token o in JSON at position 1是个很常见的错误，根源在于你重复解析了请求体：

当你的前端通过fetch发送Content-Type: application/json格式的请求时，Firebase Cloud Functions会自动帮你把请求体解析成JavaScript对象，此时request.body已经是一个包含image字段的对象，而非原始JSON字符串。这时候你再调用JSON.parse(request.body)，相当于把[object Object]这个字符串传入解析函数，自然会在第1个字符"o"的位置触发语法错误。

修复代码 #

只需要移除多余的JSON.parse调用，直接使用request.body即可：

修改后的完整index.js核心代码：

const functions = require("firebase-functions");
const cors = require("cors")({ origin: true });
const fs = require("fs");
const UUID = require("uuid-v4");
const gcconfig = {
  projectId: "awsome-34343434343434",
  keyFileName: "awsome.json"
};
const { Storage } = require("@google-cloud/storage");
const storage = new Storage(gcconfig);

exports.storeImage = functions.https.onRequest((request, response) => {
  cors(request, response, () => {
    console.log("THE BODY:" + JSON.stringify(request.body));
    // 移除这行多余的JSON.parse
    console.log("THE IMAGE:" + request.body.image);
    
    // 可选：添加参数校验，避免空数据导致错误
    if (!request.body.image) {
      return response.status(400).json({ error: "Missing image data in request body" });
    }

    // 建议使用异步写入，避免阻塞云函数
    fs.writeFile("/tmp/uploaded-image.jpg", request.body.image, "base64", err => {
      if (err) {
        console.log(err);
        return response.status(500).json({ error: err });
      }
      
      const bucket = storage.bucket("awsome-1548769019561");
      const uuid = UUID();
      console.log("UUID: " + uuid);
      
      bucket.upload(
        "/tmp/uploaded-image.jpg",
        {
          uploadType: "media",
          destination: "/places/" + uuid + ".jpg",
          metadata: {
            metadata: {
              contentType: "image/jpeg",
              firebaseStorageDownloadTokens: uuid
            }
          }
        },
        (err, file) => {
          if (!err) {
            response.status(201).json({
              imageUrl: "https://firebasestorage.googleapis.com/v0/b/" + bucket.name + "/o/" + encodeURIComponent(file.name) + "?alt=media&token=" + uuid
            });
          } else {
            console.log(err);
            response.status(500).json({ error: err });
          }
        }
      );
    });
  });
});

额外优化建议 #

• 替换同步的fs.writeFileSync为异步的fs.writeFile：同步操作会阻塞云函数的执行线程，在高并发场景下影响性能，异步写法能更好地利用资源。
• 添加请求参数校验：提前检查request.body.image是否存在，可以快速返回400错误，避免无效的文件写入操作。

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