Firebase Cloud Functions和Busboy无法解析字段或文件 [英] Firebase Cloud Functions and Busboy not parsing fields or files

问题描述

我一直在使用Firebase Cloud Functions和Express进行一些实验，当我尝试使用Busboy处理FormData时遇到问题。
似乎我只有一个大的格式错误的文本字段，其中包含所有数据，包括我尝试上传的文件的任何二进制数据（即乱码的ascii字符）。

I've been doing some experiments with Firebase Cloud Functions and Express, and I am stuck with a problem when I try to process a FormData with Busboy. It seems that I only get one big malformed text field with all the data in it, including also any binary data of files I try to upload (i.e. gibberish ascii characters).

即使在SO上，我也尝试过在线找到的不同解决方案，我发现所有这些解决方案都是围绕Google提供的有关Multipart Data的示例构建的：
https://cloud.google.com/functions/docs/writing/http

I've tried the different solutions found online, even here on SO, and I see that all of them are built around the example provided by Google about Multipart Data: https://cloud.google.com/functions/docs/writing/http

这是我的服务器端代码：

This is my server-side code:

// index.js
const functions = require('firebase-functions');
const express = require('express');
const Busboy = require('busboy');

app = express();

app.post('/upload', (req, res) => {
  const busboy = new Busboy({
    headers: req.headers,
    limits: {
      // Cloud functions impose this restriction anyway
      fileSize: 10 * 1024 * 1024,
    }
  });

  busboy.on('field', (key, value) => {
    console.log(`Busboy field ${key}: ${value}`);
  });

  busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
    console.log(`Busboy file ${fieldname}: ${filename}`);
  });

  busboy.on('finish', () => {
    console.log('Busboy finish');
    return res.send({
      status: 'Success',
      text: 'Great job!'
    });  
  });

  busboy.end(req.rawBody);
});

exports.api = functions.https.onRequest(app);

这是Node JS中的客户端：

And this is the client in Node JS:

// index.js
import axios from 'axios';
import FormData from 'form-data';

const ENDPOINT_URL = XXXXXXXXXXXXXXXXX;

const postFile = async () => {

    try {
        const form_data = new FormData();
        form_data.append('userName', 'Fred');
        form_data.append('password', 'Flintstone');
        const response = await axios.post(`${ENDPOINT_URL}/upload`, form_data);
        console.log(response.data);
    } catch (error) {
        console.error(`Error: ${error}`);
    }
}

postFile();

在客户端日志中，一切都按预期进行，我得到了出色的工作答复。但是，这是我在Firebase Cloud Functions日志中得到的：

On the client log everything is as expected, and I get the 'Great job' response back. However, this is what I get on the Firebase Cloud Functions log:

Busboy field ----------------------------047691570534364316647196
Content-Disposition: form-data; name: "userName"

Fred
----------------------------047691570534364316647196
Content-Disposition: form-data; name="password"

Flintstone
----------------------------047691570534364316647196--
)

请注意，它只是日志中的单个输出行，这意味着Busboy只打了一次onField 。如上所述，如果我将一个文件添加到FormData中，则输出将非常混乱，并且仍然只能对onField进行一次调用，而对onFile则没有任何调用。

Note that it's just a single output line in the log, meaning that Busboy called onField only once. As said above, if I add to the FormData a file, the output is very messy and I still get only ONE call to onField and none to onFile.

推荐答案

经过进一步调查，我发现服务器运行正常，而在客户端上，我需要更改此行：

After further investigations, I found out that the server is working properly, while on client I need to change this line:

const response = await axios.post(`${ENDPOINT_URL}/upload`, form_data);

至：

const config = { headers: { 'content-type': `multipart/form-data; boundary=${form_data._boundary}` }};
const response = await axios.post(`${ENDPOINT_URL}/upload`, form_data, config);

显然，尽管SO上其他文章对此做了说明，但未指定多部分标题不会自动确定它。
另请注意，如果省略 boundary 设置，则会从Busboy中收到 Boundary not found 错误在服务器上。

Apparently, despite what stated in other posts here on SO, not specifying the multipart header doesn't cause it to be determined automatically. Note also that if you omit the boundary setting, you will get a Boundary not found error from Busboy on the server.

这篇关于Firebase Cloud Functions和Busboy无法解析字段或文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！