javascript - Node.js Busboy 在“完成”事件之前没有触发“文件”事件
问题描述
我只是想通过 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/api/<path>
的名称发出请求。file
这是我在服务器请求正文中收到的内容:
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
. 我在这里想念什么?它不会记录params
在on('file')
处理程序或任何 s3 内容中。我开始深入研究 busboy 源代码,但有没有更好的方法?我做错了什么,或者与 Next.js 一起使用的库是什么?
我正在使用 Next.js 和 dotenv,这会导致奇怪的问题吗?
解决方案
万岁,我想通了,将它添加到 Next.js 路由中:
export const config = {
api: {
bodyParser: false,
},
}
https://nextjs.org/docs/api-routes/api-middlewares#custom-config
推荐阅读
- python - 在 on_change 函数中删除父布局(SIGSEGV 错误)
- html - 如何在链接下制作按钮?
- php - 如何从 RAND() 获取两条不同的记录?
- sql - 配置 Artifactory 以处理外部 MSSQL 服务器错误
- javascript - 格式化 JavaScript 数组中的特定值
- python - TypeError:字符串格式化期间并非所有参数都转换(Python)
- spring-boot-actuator - 执行器 - 就绪状态总是返回 503
- html - 主要内容和 scrollspy 导航栏重叠
- javascript - 使用通过原生 JavaScript 和 jQuery 方法选择的元素
- xml - 如何为给定的 XML 片段编写 XSD。?