文件出现在req.body中,但它在req.file中撒了
你好吗?我无法从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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论