Multer 未标识多部分/表单数据请求文件

Question

客户（ReactJS/Axios）：

const handleSubmit = async (croppedImage: any) => {

    var formData = new FormData();
    formData.append('file', croppedImage);
    formData.append('name', croppedImage.name)

    api.post(
        '/firebase',
        formData,
        {
            headers: {
                'Content-Type': 'multipart/form-data',
            }
        }
    )
        .then(() => console.log('Success'))
        .catch(e => console.error(e))
}

Multer中间件：

const { v4: uuidv4 } = require('uuid');
const multer = require('multer');

const error = new Error('Only .png format allowed!');

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        if (!file) return cb(error);
        cb(null, DIR);
    },
    filename: (req, file, cb) => {
        if (!file) return cb(error);
        const fileName = file.originalname.toLowerCase().split(' ').join('-');
        cb(null, uuidv4(4) + '-' + fileName)
    }
});
var upload = multer({
    storage: storage,
    fileFilter: (req, file, cb) => {
        if (!file) return cb(error);
        if (file.mimetype == "image/png") {
            cb(null, true);
        } else {
            cb(null, false);
            return cb(error);
        }
    }
});

module.exports = upload.single('file');

下一个（）：

异步（req，res）=

const fileName = req.file.filename; 

此处req.file未定义！

...

}

当我尝试使用Axios传递图像时，req.file在控制器中显示为未定义。

我认为错误是在传递多部分/表单数据时，因为当我通过Insonmia Rest执行此操作时，它会工作！

Answer 1

croppedImage就像一个blob url或类似的东西，所以:

客户（ReactJS/Axios）：

let blob = await fetch(croppedImage).then(r => r.blob());
var formData = new FormData();
formData.append('file', blob, 'file.jpeg')

Answer 2

表格示例：

<form action="/insert" enctype="multipart/form-data" method="post">
    <div class="form-group">
    <input type="file" class="form-control-file" name="uploaded_file">
    <input type="submit" value="Get me the stats!" class="btn btn-default">            
    </div>
</form>