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

Question

前端

文件输入：

<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 post:

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

其中formSFTP为文件输入，monitor为所有其他表单域，contactos是一个对象数组，excepciones也是一个对象数组

后端

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 放在括号内，但我只得到一个空对象

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

Answer 1

我发现我的问题出在 axios post,

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() 然后在后端，这样我就可以将它保存为对象数组

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

How can I access the text input fields when using express-fileupload from react

javascript

file-upload

node.js

express

reactjs

前端

后端