【发布时间】：2020-10-03 17:32:39
【问题描述】：
我正在使用 multer 从我的 Register.js React-hookspage 获取服务器端的文件信息。
在 server.js 中设置断点时，我可以看到 req 信息，但文件以某种方式显示 undefined。
我在我的问题中添加了客户端和服务器端代码。
在 multer 文档中，我通过 req.file 读取文件以获取文件，但我变得不确定，我现在有点卡住了。
server.js
const express = require('express');
const bodyParser = require("body-parser");
var multer = require('multer')
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './public/images/')
},
filename: function (req, file, cb) {
var ext = file.originalname.split('.').pop();
cb(null, file.fieldname + '-' + Date.now() + '.' + ext);
}
})
var upload = multer({ storage: storage });
app.put('/service/player', upload.single('photo'), async (req, res, next) => {
try {
const userName = req.body.name;
const userEmail = req.body.email;
const userPhone = req.body.phonenumber;
const userPassword = req.body.password;
const userPrivilege = req.body.privilege;
const userPrivilegeUppercase = userPrivilege.toUpperCase();
const userImage = req.body.photo;
const userPosition = req.body.position;
console.log(req.file); //file is getting undefined here
const playerEmail = await UserModel.count({ where: { email: userEmail } });
if (playerEmail == 0) {
if(req.file){ //new code to check the image starts here
var imageOriginalName = req.body.photo.originalname;
var imageName = req.body.photo.fieldname;
var imageMime = req.body.photo.mimetype;
var imagePath = req.body.photo.path;
var imageSize = req.body.photo.size;
} else {
var imageName = "noimage.png";
} //ends here
//If there is no email found, procced with normal registration here...
var playerData = {name:userName, email:userEmail, phonenumber:userPhone, password:userPassword, privilege:userPrivilegeUppercase, photo: imagePath, position: userPosition };
const addPlayer = await UserModel.create(playerData);
res.status(200).json({ success: true });
} else {
return res.status(409).json({ message: "Email address already exists !" });
}
} catch (err) {
return next(err);
}
});
Register.js
const [formRegister, setRegister] = useState({ _id: '', photo: '', name: '', email: '', phonenumber: '', position: '', privilege: '', password: '' })
const onChangePicture = e => {
console.log('picture: ', picture);
if (e.target.files.length) {
setPicture(URL.createObjectURL(e.target.files[0]));
setRegister({ ...formRegister, [e.target.name]: e.target.value });
} else {
return false;
}
};
const onChange = (e) => {
e.persist();
setRegister({ ...formRegister, [e.target.name]: e.target.value });
}
const onSubmit = e => {
const fetchData = async () => {
try {
const res = await axios.put('http://localhost:8000/service/player', formRegister);
console.log("Front End success message:" + res.data.success);
if (res.data.success) {
setIsSent(true);
history.push('/login')
}
else {
console.log(res.data.message);
setHelperText(res.data.message);
}
} catch (e) {
setHelperText(e.response.data.message);
}
}
fetchData();
}
return (
<div className="register_player_column_layout_one">
<div className="register_player_Twocolumn_layout_two">
<form onSubmit={handleSubmit(onSubmit)} className="myForm" encType="multipart/form-data">
<div className="formInstructionsDiv formElement">
<h2 className="formTitle" >Sign Up</h2>
<p className="instructionsText">Not registered yet, please register now !</p>
<div className="register_profile_image">
<input id="profilePic" name="photo" type="file" onChange={onChangePicture} />
</div>
<div className="previewProfilePic" >
<img alt="" onError={addDefaultSrc} name="previewImage" className="playerProfilePic_home_tile" src={picture}></img>
</div>
</div>
<div className="fillContentDiv formElement">
<label>
<input className="inputRequest formContentElement" name="name" type="text" placeholder="Full Name"
onChange={onChange}
maxLength={30}
ref={register({
required: "Full name is required",
pattern: {
value: /^[a-zA-Z\s]{3,30}$/,
message: "Full name should have minimum of 3 letters"
}
})}
/>
<span className="registerErrorTextFormat">{errors.name && errors.name.message}</span>
</label>
<label>
<input className="inputRequest formContentElement" name="email" type="text" placeholder="Email"
onChange={onChange}
ref={register({
required: "Email is required",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: "Invalid email address"
}
})}
/>
<span className="registerErrorTextFormat">{errors.email && errors.email.message}</span>
</label>
<label>
<input className="inputRequest formContentElement" name="phonenumber" type="text" placeholder="Mobile"
onChange={onChange}
maxLength={11}
ref={register({
required: "Phone number is required",
pattern: {
value: /^[0-9\b]+$/,
message: "Invalid phone number"
}
})}
/>
<span className="registerErrorTextFormat">{errors.phonenumber && errors.phonenumber.message}</span>
</label>
<label>
<input className="inputRequest formContentElement" name="position" type="text" placeholder="Position"
onChange={onChange}
maxLength={30}
ref={register({
pattern: {
value: /^[a-zA-Z\s]{2,30}$/,
message: "Position should have minimum of 2 letters"
}
})}
/>
<span className="registerErrorTextFormat">{errors.position && errors.position.message}</span>
</label>
<label>
<div className="select" >
<select defaultValue={'DEFAULT'} name="privilege" id="select" onChange={onChange}>
<option value="DEFAULT" disabled>Choose an option</option>
<option value="player">PLAYER</option>
<option value="admin">ADMIN</option>
</select>
</div>
</label>
<label>
<input className="inputRequest formContentElement" name="password" type="password" placeholder="eg: P@ssW0rd"
onChange={onChange}
minLength={4}
maxLength={30}
ref={register({
required: "Password is required",
pattern: {
value: /^(?=.*?\d)(?=.*?[a-zA-Z])[a-zA-Z\d]+$/,
message: "Password begin with a letter and includes number !"
}
})}
/>
<span className="registerErrorTextFormat">{errors.password && errors.password.message}</span>
</label>
</div>
<label>
<span className="registerValidationText">{helperText}</span>
</label>
<div className="submitButtonDiv formElement" style={{ margin: isError ? '65px 0 20px 0' : '20px 0 20px 0' }}>
<button type="submit" className="submitButton">Register</button>
</div>
</form>
</div>
</div>
);
【问题讨论】：
标签： reactjs express react-hooks multer