如何使用 Express API 知道从 reactjs 中的多个文件类型输入上传了哪个文件

Question

我创建了一个 API 来将文件上传到我的网站。我要求用户上传四个文件，我有四个文件上传按钮。

我将这些图像保存在我的 MySQL 数据库中的 table 中，名为 images。

我需要做的是知道正在上传的文件类型，这样我就可以在我的数据库中创建列来指定该文档是例如“打包文档”。

我如何将这个点击的文件输入按钮的类型发送到我的后端，以便我可以正确地将文档插入我的数据库并在需要时正确轻松地获取它们。

这里有一张图片可以更清楚一点：

这是我的代码：

后端API:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mysql = require('mysql');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const multer = require('multer');
const path = require('path');
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null,'images')
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + path.extname(file.originalname))
    }
});
const upload = multer({storage: storage});
const app = express();

app.post("/api/upload", upload.single('image') , (req, res) => {

    const image = req.file.filename;
    
    db.query("INSERT INTO images (image) VALUES (?)",[image], (err, result) => {
        if(err){
            console.log(err);
        }

        if(result){
            res.send({
                data: result,
                msg: "Image uploaded"
            })
        }
    })
});

前端：

const imageHandler = (event) => {
        const file = event.target.files[0];
        const formData = new FormData();

        formData.append('image', file);

        fetch(`http://localhost:3001/api/upload`, {
            method: 'POST',
            body: formData,
            headers: {
                'Accept': 'multipart/form-data',
             
            },
            credentials: 'include',
            
        })
        .then(res => res.json())
        .then(res => {
            setUploadStatus("pack")
        })
        .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" 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="comm" />
            </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="coo" />
            </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="otherdoc" />
            </Form.Group>
  </Col>
)

Answer 1

你必须明确告诉它。

    const formData = new FormData();
    formData.append('image', file);
    formData.append('type', 'commercial');

例如

如何使用 Express API 知道从 reactjs 中的多个文件类型输入上传了哪个文件

How to know which file has been uploaded from multiple inputs of type file in reactjs using Express API

javascript

node.js

express

reactjs

multer