文件出现在req.body中,但它在req.file中撒了

发布于 2025-01-27 02:11:59 字数 5367 浏览 1 评论 0原文

你好吗?我无法从req.file那里获取文件,我有enctype,multer中间件和所有必要的工作,但它会付出的时间,所以请给我一个人!谢谢您的

前后

import React, { Component }from 'react';
import "./register.css"
import Axios from "axios";

class Register extends Component {
state = {
    nombre: "",
    apellido: "",
    password: "",
    file: ""
}

changeHandler = e => {
    if (e.target.name === "file") {
        this.setState({ [e.target.name]: e.target.files });
    } else {
        this.setState({ [e.target.name]: e.target.value });
    }
}

submitHandler = e => {
    e.preventDefault();
    
    const formData = new FormData();
    formData.append("nombre", this.state.nombre);
    formData.append("apellido", this.state.apellido);
    formData.append("password", this.state.password);
    formData.append("file", this.state.file);


    Axios
    .post('http://localhost:5000/usuarios/guardar', formData)
    .then(response => {
        console.log(response)
        })
    .then(data => console.log(data))
        .catch(error => {
            console.log(error)
        })

        console.log("file", this.state.file)

}
    
    render(){
        
        const {nombre,apellido,password} = this.state
        
        return(
            <section className="forms-container margin-sections">
            <form onSubmit={this.submitHandler} method="POST" id="register" encType="multipart/form-data">
                    <fieldset>
                        <input type="text" placeholder="Nombre" name="nombre" value={nombre} className="input" onChange={this.changeHandler}/>
                    </fieldset>
                    <fieldset>
                        <input type="text" placeholder="Apellido" name="apellido" value={apellido} className="input" onChange={this.changeHandler}  />
                    </fieldset>
                    <fieldset>
                        <input type="password" placeholder="Contraseña" name="password" value={password} className="input" onChange={this.changeHandler} />
                    </fieldset>
                    <fieldset>
                        <input type="file" name="file" className="input" onChange={this.changeHandler} id="user-photo" />
                    </fieldset>
                <fieldset>
                    <button className="button-login" type="submit">Enviar</button>
                </fieldset>
                </form>
        </section>
    )}
 }

export default Register;

路由

const express = require('express');
const router = express.Router();
const path = require("path");
const fs = require("fs");
const user = require("../controllers/user");
const multer = require("multer");



// ************ Multer ************

const dest = multer.diskStorage({
destination: function (req, file, cb) {
    let dir = path.resolve(__dirname,"../../public/uploads","users",             
 String(req.body.nombre).trim().replace(/\s+/g, ''))
    if (!fs.existsSync(dir)){
        fs.mkdirSync(dir);
    }
    cb(null, dir)
},
filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now()+ path.extname(file.originalname))
}
})

const upload = multer({storage:dest});


// ************ Routes ************


router.post('/guardar', upload.single("") , user.post)

module.exports = router;

返回控制器

const main = {
post: async (req, res) => {
    try{
        
        let data = req.body;
        
        let file = req.file;

        console.log("holaa2", req);

        console.log("holaa2", file, req.files);

        
        // let usuario = {
        //     nombre: String(data.nombre),
        //     apellido: String(data.apellido),
        //     password: String(data.password),
        //     // image: file.file
        // }

        // let usuarios = await db.Users.create(usuario)

        return console.log("llegue bien perreke");
        
    }catch(e){
        console.log(e);
    }
},
}

控制台。用户控制器HolaA2中的REQ log

holaa2 undefined undewined(第一个是req.file,第二个是req.files)当我使用upload.any()时,它会带有一个空[]文件的名称,与上传的相反情况。

入口点

// ************ Require's ************

const express = require('express');
const path = require('path');
const app = express();
const cors = require('cors');
const bodyParser = require('body-parser');


// ************ Data Configuration ************

app.use(bodyParser.json())
app.use(express.urlencoded({ extended: true}));
app.use(express.json())

//CORS
app.use(cors());

// ************ Servidor ************

app.set("port", process.env.PORT || 5000);
app.listen(app.get("port"), () => console.log("Server start in             
http://localhost:"+app.get("port")));



// ************ Acceso Publico ************

app.use(express.static(path.resolve(__dirname, "../public/uploads/instruments"))); //     

// ************ API's ************

const apiInstrumentos = require("./routes/apiInstrumentos");

app.use("/instrumentos", apiInstrumentos)


// ************ Router Define ************

const instrumentRouter = require("./routes/instrumentos.js");

app.use("/", instrumentRouter);

const users = require("./routes/user");

app.use("/usuarios", users);

请给我一个反馈,这是我第三次寻求解决方案,没有人会帮助我,我很陷入困境,因为我找不到问题所在!你

How are u doing? I cant get the file from req.file, i have encType, multer middleware, and all the necessary stuff to work, but it dosent, so plz give me a hand! Thanks you

Front

import React, { Component }from 'react';
import "./register.css"
import Axios from "axios";

class Register extends Component {
state = {
    nombre: "",
    apellido: "",
    password: "",
    file: ""
}

changeHandler = e => {
    if (e.target.name === "file") {
        this.setState({ [e.target.name]: e.target.files });
    } else {
        this.setState({ [e.target.name]: e.target.value });
    }
}

submitHandler = e => {
    e.preventDefault();
    
    const formData = new FormData();
    formData.append("nombre", this.state.nombre);
    formData.append("apellido", this.state.apellido);
    formData.append("password", this.state.password);
    formData.append("file", this.state.file);


    Axios
    .post('http://localhost:5000/usuarios/guardar', formData)
    .then(response => {
        console.log(response)
        })
    .then(data => console.log(data))
        .catch(error => {
            console.log(error)
        })

        console.log("file", this.state.file)

}
    
    render(){
        
        const {nombre,apellido,password} = this.state
        
        return(
            <section className="forms-container margin-sections">
            <form onSubmit={this.submitHandler} method="POST" id="register" encType="multipart/form-data">
                    <fieldset>
                        <input type="text" placeholder="Nombre" name="nombre" value={nombre} className="input" onChange={this.changeHandler}/>
                    </fieldset>
                    <fieldset>
                        <input type="text" placeholder="Apellido" name="apellido" value={apellido} className="input" onChange={this.changeHandler}  />
                    </fieldset>
                    <fieldset>
                        <input type="password" placeholder="Contraseña" name="password" value={password} className="input" onChange={this.changeHandler} />
                    </fieldset>
                    <fieldset>
                        <input type="file" name="file" className="input" onChange={this.changeHandler} id="user-photo" />
                    </fieldset>
                <fieldset>
                    <button className="button-login" type="submit">Enviar</button>
                </fieldset>
                </form>
        </section>
    )}
 }

export default Register;

Back Route

const express = require('express');
const router = express.Router();
const path = require("path");
const fs = require("fs");
const user = require("../controllers/user");
const multer = require("multer");



// ************ Multer ************

const dest = multer.diskStorage({
destination: function (req, file, cb) {
    let dir = path.resolve(__dirname,"../../public/uploads","users",             
 String(req.body.nombre).trim().replace(/\s+/g, ''))
    if (!fs.existsSync(dir)){
        fs.mkdirSync(dir);
    }
    cb(null, dir)
},
filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now()+ path.extname(file.originalname))
}
})

const upload = multer({storage:dest});


// ************ Routes ************


router.post('/guardar', upload.single("") , user.post)

module.exports = router;

Back Controller

const main = {
post: async (req, res) => {
    try{
        
        let data = req.body;
        
        let file = req.file;

        console.log("holaa2", req);

        console.log("holaa2", file, req.files);

        
        // let usuario = {
        //     nombre: String(data.nombre),
        //     apellido: String(data.apellido),
        //     password: String(data.password),
        //     // image: file.file
        // }

        // let usuarios = await db.Users.create(usuario)

        return console.log("llegue bien perreke");
        
    }catch(e){
        console.log(e);
    }
},
}

Console.log of Req in User controller

holaa2 undefined undefined (first one is req.file and the second one is req.files) when i use upload.any() it appear a empty [] with the name of files, opposite case with upload.single("file"), where nothing happend.

Entry Point

// ************ Require's ************

const express = require('express');
const path = require('path');
const app = express();
const cors = require('cors');
const bodyParser = require('body-parser');


// ************ Data Configuration ************

app.use(bodyParser.json())
app.use(express.urlencoded({ extended: true}));
app.use(express.json())

//CORS
app.use(cors());

// ************ Servidor ************

app.set("port", process.env.PORT || 5000);
app.listen(app.get("port"), () => console.log("Server start in             
http://localhost:"+app.get("port")));



// ************ Acceso Publico ************

app.use(express.static(path.resolve(__dirname, "../public/uploads/instruments"))); //     

// ************ API's ************

const apiInstrumentos = require("./routes/apiInstrumentos");

app.use("/instrumentos", apiInstrumentos)


// ************ Router Define ************

const instrumentRouter = require("./routes/instrumentos.js");

app.use("/", instrumentRouter);

const users = require("./routes/user");

app.use("/usuarios", users);

Please give me a feedback, its the third time that i ask for a solution a nobody helps me, im very stucked because i cant find where is the problem! Thx you

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文