Node.js服务生在"finish“事件之前未触发"file”事件

Question

我只是尝试通过Node.js/Next.js从浏览器上传一个文件到S3，而busboy没有发出file事件。

下面是我的FE代码：

Upload.prototype.to = function(options, fn){
  // TODO: x-browser
  var path;
  if (typeof options == 'string') {
    path = options;
    options = {};
  } else {
    path = options.path;
  }
  var self = this;
  fn = fn || function(){};
  var req = this.req = new XMLHttpRequest;
  req.open('POST', path);
  req.onload = this.onload.bind(this);
  req.onerror = this.onerror.bind(this);
  req.upload.onprogress = this.onprogress.bind(this);
  req.onreadystatechange = function(){
    if (4 == req.readyState) {
      var type = req.status / 100 | 0;
      if (2 == type) return fn(null, req);
      var err = new Error(req.statusText + ': ' + req.response);
      err.status = req.status;
      fn(err);
    }
  };
  var key, headers = options.headers || {};
  for (key in headers) {
    req.setRequestHeader(key, headers[key]);
  }
  var body = new FormData;
  body.append(options.name || 'file', this.file);
  var data = options.data || {};
  for (key in data) {
    body.append(key, data[key]);
  }
  req.send(body);
};

所要做的就是使用我试图上传的所选jpeg的file名称向/api/<path>发出请求。这是我在服务器请求正文中收到的内容：

body: '------WebKitFormBoundaryWbaXO8J6c8aI7Q4B\r\n' +
    'Content-Disposition: form-data; name="file"; filename="1-profile.jpg"\r\n' +
    'Content-Type: image/jpeg\r\n' +
    '\r\n' +
    '����\x00\x10JFIF...

这些标头包括：

  connection: 'keep-alive',
  'content-length': '41079',
  pragma: 'no-cache',
  'cache-control': 'no-cache',
  'content-type': 'multipart/form-data; boundary=----WebKitFormBoundaryWbaXO87Kc9aI2Q4B',
  accept: '*/*',
  origin: 'http://localhost:3000',

我的服务器代码如下所示：

import fetchId from '../../../../utils/get-next-id-from-pg'
import Busboy from 'busboy'
import s3 from 'initializers/s3'

export default async function(req, res) {
  if (req.method === 'POST') {
    const id = await fetchId('image')

    return new Promise((resolve, rej) => {
      const busboy = new Busboy({ headers: req.headers });
      busboy.on('field', function(fieldname, val, fieldnameTruncated, valTruncated, encoding, mimetype) {
        console.log('Field [' + fieldname + ']: value: ' + inspect(val));
      })
      busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
        console.log('params')
        const params = {
          Bucket: 'mybucket123',
          Key: id,
          Body: file
        }
        s3.upload(params, (err, data) => {
          console.log('s3', err, data)
          res.setHeader('Connection', 'close');
          res.status(200).json({ records: [ { id } ]})
          resolve()
        })
      })
      busboy.on('finish', function() {
        console.log('finish')
      })
      req.pipe(busboy);
    })
  } else {
    res.writeHead(405, { 'content-type': 'text/plain' });
    res.end("Method not allowed. Send a POST request.");
    return;
  }
}

它记录finish，仅此而已，它既不记录file，也不记录field。这里我漏掉了什么？它不会在on('file')处理程序中记录params，也不会记录任何s3内容。我开始深入研究餐饮工的源代码，但是有没有更好的方法呢？我做错了什么，或者什么是可以与Next.js一起工作的库？

我使用的是Next.js和dotenv，这会导致奇怪的问题吗？

Answer 1

万岁，我figured it out，添加到Next.js路由：

export const config = {
  api: {
    bodyParser: false,
  },
}

https://nextjs.org/docs/api-routes/api-middlewares#custom-config