Formidable报错：Request aborted问题的修复求助

问题场景 #

基于Node.js、Express.js、MongoDB开发的汽车租赁应用，前端使用JavaScript实现图片上传，计划通过formidable处理文件并存储到AWS S3。当在汽车信息录入表单填写数据并选择图片后，控制台抛出请求中断错误。

错误日志 #

Error: Request aborted
    at IncomingMessage.<anonymous> (C:\Users\201217040\Documents\CarRental\node_modules\formidable\lib\incoming_form.js:122:19)
    at IncomingMessage.emit (node:events:369:20)
    at IncomingMessage.emit (node:domain:470:12)
    at abortIncoming (node:_http_server:598:9)
    at socketOnClose (node:_http_server:589:3)
    at Socket.emit (node:events:381:22)
    at Socket.emit (node:domain:470:12)
    at TCP.<anonymous> (node:net:666:12)

相关代码片段 #

1. app.js 核心代码 #

const express = require('express');
const bodyParser = require('body-parser');
const formidable = require('formidable');
const {upload} = require('./helpers/aws');

const app = express();

// 解析器配置
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());

// 图片上传路由
app.post('/uploadImage',requireLogin,upload.any(),(req,res)=>{
    const form = new formidable.IncomingForm();
    form.on('file',(field,file)=>{
        console.log(file);
    });
    form.on('error',(err)=>{
        console.log(err);
    });
    form.on('end',()=>{
        console.log('Image received successfully.');
    });
    form.parse(req);
});

2. aws.js 存储配置 #

const aws = require('aws-sdk');
const multer = require('multer');
const multers3 = require('multer-s3');
const keys = require('../config/keys');

aws.config.update({
    accessKeyId:keys.AWSAccessID,
    secretAccessKey: keys.AWSSecretKey,
    region: 'eu-north-1'
});

const s3 = new aws.S3({});

const upload = multer({
    storage: multers3({
        s3:s3,
        bucket: 'car-rental-application',
        ac1:'public-read',
        metadata:(req,file,cb)=>{
            cb(null,{fieldName:file.fieldname});
        }, 
        key: (req,file,cb)=>{
            cb(null,file.originalname);
        },
        rename: (fieldName,fileName) =>{
            return fileName.replace(/\W+/g, '-').toLowerCase();
        }
    })
});
exports.upload = upload;

3. 前端表单与JS代码 #

<div class="row">
    <div class="col-sm-5">
            <form action="/listCar2" method="POST">
            <input type="hidden" name="carID" value="{{car._id}}">
            <!-- 其他表单字段省略 -->
            <div class="form-group">
                <button class="btn btn-info upload-btn" type="button">Choose image</button>
                <input type="file" name="image" id="upload-input" style="display: none;" required>
            </div>
            <button type="submit" class="btn btn-primary">List a car</button>
            </form>
    </div>
</div>

<script>
$(document).ready(function(){
    $('.upload-btn').on('click',function(){
        $('#upload-input').click();
    });
    $('#upload-input').on('change', function(){
        var uploadInput = $('#upload-input');
        if(uploadInput.val() != ''){
            var formData = new FormData();
            formData.append('image', uploadInput[0].files[0]);
            
            $.ajax({
                url: '/uploadImage',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function() {
                    uploadInput.val('');
                }
            })
         }
    })
})
</script>

解决方案 #

1. 移除multer与formidable的重复解析冲突 #

upload.any()（multer中间件）已经完成了请求体的解析，此时再用formidable解析同一个req会导致请求流被耗尽，直接触发中断错误。

修复后app.js路由代码：

app.post('/uploadImage',requireLogin,upload.any(),(req,res)=>{
    // 直接使用multer解析后的文件对象
    console.log('上传的文件:', req.files);
    // 可在此处将文件信息存入数据库
    res.status(200).json({message: '图片上传成功'});
});

2. 修正AWS配置的拼写错误 #

ac1:'public-read'是拼写错误，正确的参数名是acl（Access Control List），该错误会导致multer-s3上传失败，间接引发请求中断。

修复后aws.js代码片段：

const upload = multer({
    storage: multers3({
        s3:s3,
        bucket: 'car-rental-application',
        acl:'public-read', // 修正拼写错误
        // 其他配置保留
    })
});

3. 补充前端AJAX错误处理 #

原AJAX仅处理成功场景，错误时无反馈，容易导致请求异常终止。添加错误回调可排查前端问题。

修复后前端AJAX代码：

$.ajax({
    url: '/uploadImage',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        uploadInput.val('');
        console.log(response.message);
    },
    error: function(xhr, status, error) {
        console.error('上传失败:', error);
    }
})

4. 给表单添加enctype属性 #

主表单包含文件输入，需声明enctype="multipart/form-data"，避免直接提交表单时出现解析错误。

修复后form标签：

<form action="/listCar2" method="POST" enctype="multipart/form-data">

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