使用 react 中的 express-fileupload 时如何访问文本输入字段答案

【问题标题】：How can I access the text input fields when using express-fileupload from react使用 react 中的 express-fileupload 时如何访问文本输入字段
【发布时间】：2021-06-08 00:17:32
【问题描述】：

前端

文件输入：

<div className="form-group row">
 <label htmlFor="directorioSSH" className="col-sm-3 col-form-label">Directorio: </label>
  <div className="col-sm-7">
  <input type="file" className="file" name="directorioSSH" disabled={!antiDefaced} onChange={presetDatos} onInput={guardaSSH} />
 </div>
</div>

保存文件到状态：

const guardaSFTP = async evento => {
  setArchivoSFTP(evento.target.files[0]);
}
const formSFTP = new FormData();
formSFTP.append('directorioFTP', archivoSFTP)

发送 axios 帖子：

const response = await axios.post('http://localhost:4000/api/monitor', formSFTP, {monitor, contactos, exepciones })

formSFTP 是文件输入，monitor 是所有其他表单字段，contactos 是对象数组，异常也是一个对象数组

后端

Index.js：

const fileUpload = require('express-fileupload');
server.use(cors());
server.use(morgan('dev'));
server.use(express.json());
server.use(express.urlencoded({ extended: true }));
server.use(fileUpload({
    createParentPath: true
}));
server.use(express.static("./public"));


server.use('/api/monitor', require('./routes/monitorRouter'));

monitorRouter.js：

const { Router } = require('express');
const router = Router();
const { obtenerTodos, obtenerUno, crear, modificar, eliminar, modificarEstadoMonitor, subirArchivo} = require('../controllers/monitorController')

router.get('/', obtenerTodos);
router.get('/:id', obtenerUno);
router.post('/', crear);
router.post('/subir', subirArchivo);
router.put('/', modificar);
router.delete('/:id', eliminar);
router.patch('/:id',modificarEstadoMonitor);

module.exports = router;

monitorController.js:
controladorMonitor.crear，我想要我的文件和其他表单字段：

controladorMonitor.crear = async (req, res) => {
    console.log(req.files);
    console.log(req.body);
    const crearMonitor = new Monitor({
        generales: {
            urlSitio:                   req.body.monitor.urlSitio,
            userAgent:                  req.body.monitor.userAgent,
            cookieName:                 req.body.monitor.cookieName,
            validaURL:                  req.body.monitor.validaURL,
            monitoreaCada:              req.body.monitor.monitoreaCada,
            generarMinitatura:          req.body.monitor.generarMinitatura
        },

        maximoAlertas:                  req.body.monitor.maximoAlertas,
        contactos:                      req.body.contactos,

        exepcionesTexto:                req.body.exepciones,
        habilitarExepcionesTexto:       req.body.monitor.habilitarExepcionesTexto,

        antiDefaced:                    req.body.monitor.antiDefaced,
        integridadImagen:               req.body.monitor.integridadImagen,
        porcentajeIgualdad:             req.body.monitor.porcentajeIgualdad,
        porcentajeIgual:                req.body.monitor.porcentajeIgual,
        fuzzyHashing:                   req.body.monitor.fuzzyHashing,
        fuzzyHash:                      req.body.monitor.fuzzyHash,
        igualdad:                       req.body.monitor.igualdad,
        ftp:                            req.body.monitor.ipFTP,
        usuarioFTP:                     req.body.monitor.usuarioFTP,
        contraseniaFTP:                 req.body.monitor.contraseniaFTP,
        directorioFTP:                  req.body.monitor.directorioFTP,
        puertoFTP:                      req.body.monitor.puertoFTP,
        ipSSH:                          req.body.monitor.ipSSH,
        usuarioSSH:                     req.body.monitor.usuarioSSH,
        contraseniaSSH:                 req.body.monitor.contraseniaSSH,
        directorioSSH:                  req.body.monitor.directorioSSH,
        puertoSSH:                      req.body.monitor.puertoSSH
    })

    try {
        await crearMonitor.save();
        if (!fse.existsSync(crearMonitor._id)) {
            fse.mkdirSync('archivos/'+crearMonitor._id)
        }
        res.status(201).json('Monitor creado exitosamente');
    } catch (err) {
        generateLog('db_error', err);
        res.status(400).json('Error en la petición')
    }
};

如果我这样发送 axios：

const response = await axios.post('http://localhost:4000/api/monitor', {monitor, contactos, exepciones })

我可以成功发送请求并获取其他字段（未定义从console.log（req.files）获得）

undefined
{
  monitor: {
    urlSitio: 'https://www.amazon.com.mx/',
    userAgent: '',
    cookieName: '',
    validaURL: false,
    monitoreaCada: 1,
    generarMinitatura: false,
    maximoAlertas: 0,
    nombreContacto: '',
    correoContacto: '',
    adjuntarCambioAlerta: false,
    habilitarExepcionesTexto: false,
    exepcionesTexto: '',
    antiDefaced: true,
    integridadImagen: false,
    porcentajeIgualdad: 0,
    porcentajeIgual: false,
    fuzzyHashing: 0,
    fuzzyHash: false,
    igualdad: false,
    ipFTP: '',
    usuarioFTP: '',
    contraseniaFTP: '',
    puertoFTP: 0,
    ipSSH: '',
    usuarioSSH: '',
    contraseniaSSH: '',
    puertoSSH: 0
  },
  contactos: [],
  exepciones: []
}
POST /api/monitor 201 27.813 ms - 29

但是如果我尝试按照我之前的方式发送它（使用 formSFTP 文件）：

POST /api/monitor - - ms - -
{
  directorioFTP: {
    name: 'test.html',
    data: <Buffer 3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 3e 0d 0a 3c 68 74 6d 6c 3e 0d 0a 3c 68 65 61 64 3e 0d 0a 09 3c 74 69 74 6c 65 3e 54 65 73 74 20 64 65 20 73 ... 82 more bytes>,
    size: 132,
    encoding: '7bit',
    tempFilePath: '',
    truncated: false,
    mimetype: 'text/html',
    md5: '5f4261557e0c7da967573df932f4d593',
    mv: [Function: mv]
  }
}
{}
(node:21820) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'urlSitio' of undefined
    at controladorMonitor.crear (C:\Users\Samuel\Desktop\somnus-monitor\back\controllers\monitorController.js:41:58)
    at Layer.handle [as handle_request] (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\layer.js:95:5)
    at C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:281:22
    at Function.process_params (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:275:10)
    at Function.handle (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:174:3)
    at router (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:47:12)
    at Layer.handle [as handle_request] (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:317:13)
    at C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:275:10)
    at serveStatic (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\serve-static\index.js:75:16)
(node:21820) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)

我确实得到了文件，但没有得到其他表单字段，我得到了上面的错误。我尝试将 formSFTP 放在括号内，但我只获得了一个空对象

任何帮助将不胜感激，在此先感谢。

【问题讨论】：

标签： javascript node.js reactjs express file-upload

【解决方案1】：

我发现我遇到的问题是在axios帖子上，

const response = await axios.post('http://localhost:4000/api/monitor', formSFTP, {monitor, contactos, exepciones })

我必须将其他数据附加到我已经拥有的 FormData 中，而不是单独发送

它最终看起来像这样：

const form = new FormData();
            form.append('directorioFTP', archivoSFTP);
            form.append('directorioSSH', archivoSSH);
            form.append('contactos', JSON.stringify(contactos));
            form.append('exepciones', JSON.stringify(exepciones));
            for (const key in monitor) {
                form.append(key, monitor[key])
            }
const response = await axios.post('http://localhost:4000/api/monitor', form)

contactos 和 excepciones 都是对象数组，因此必须对它们进行字符串化，然后我必须在后端使用 JSON.parse()，以便将其保存为对象数组

【讨论】：