React配合Express API如何区分多个file类型input上传的文件对应类别

1. 前端调整 #

步骤1：统一文件上传组件配置 #

给所有4个文件上传组件做三个调整：

• 统一设置name="image"，和后端multer配置的接收字段名匹配
• 新增data-doc-type自定义属性，存储对应文档的类型标识
• 全部绑定onChange={imageHandler}事件

步骤2：修改上传逻辑 #

在imageHandler中获取文档类型，追加到FormData中，同时删除错误的请求头配置：

const imageHandler = (event) => {
        const file = event.target.files[0];
        const docType = event.target.dataset.docType; // 获取自定义属性里的文档类型
        const formData = new FormData();

        formData.append('image', file);
        formData.append('doc_type', docType); // 追加文档类型字段

        fetch(`http://localhost:3001/api/upload`, {
            method: 'POST',
            body: formData,
            // 无需手动设置multipart相关请求头，浏览器会自动生成带boundary的正确请求头
            credentials: 'include',
            
        })
        .then(res => res.json())
        .then(res => {
            setUploadStatus(docType) // 可动态设置对应类型的上传状态
        })
        .catch(err => {
            console.log(err);
        });
    }

 return (
 <Col md={5}>
                                    
            <Form.Group controlId="formFileSm" className="mb-1">
            <Form.Label className="font-12 color-gray">Packing List *</Form.Label>
            <Form.Control type="file"  accept="image/*" name= "image" data-doc-type="packing_list" onChange={imageHandler}/>
            </Form.Group>
                                      
            <Form.Group controlId="formFileSm" className="mb-1">
            <Form.Label className="font-12 color-gray">Commerical Invoice *</Form.Label>
            <Form.Control type="file" size="sm" name="image" data-doc-type="commercial_invoice" onChange={imageHandler}/>
            </Form.Group>

            <Form.Group controlId="formFileSm" className="mb-1">
            <Form.Label className="font-12 color-gray">Certificate of Origin *</Form.Label>
            <Form.Control type="file" size="sm" name="image" data-doc-type="certificate_origin" onChange={imageHandler}/>
            </Form.Group>

            <Form.Group controlId="formFileSm" className="mb-1">
            <Form.Label className="font-12 color-gray">Other Documents</Form.Label>
            <Form.Control type="file" size="sm" name="image" data-doc-type="other" onChange={imageHandler}/>
            </Form.Group>
  </Col>
)

2. 数据库调整 #

给images表新增doc_type字段存储文档类型，执行SQL：

ALTER TABLE images ADD COLUMN doc_type VARCHAR(50) NOT NULL COMMENT '文档类型标识';

3. 后端调整 #

修改上传接口，接收doc_type参数并存入数据库：

app.post("/api/upload", upload.single('image') , (req, res) => {
    const image = req.file.filename;
    const docType = req.body.doc_type; // 获取前端传递的文档类型
    
    db.query("INSERT INTO images (image, doc_type) VALUES (?, ?)",[image, docType], (err, result) => {
        if(err){
            console.log(err);
            return res.status(500).send({msg: "上传失败"});
        }
        res.send({
            data: result,
            msg: "Image uploaded"
        })
    })
});

后续需要拉取对应类型的文档时，只需在查询SQL中增加WHERE doc_type = '对应的类型标识'条件即可。

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