Question

我正在使用multer从我的Register.js React-hooks页中获取服务器端的文件信息。在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>
 );

Answer 1

multer文档的第一行：

Multer是用于处理multipart/form-data
的node.js中间件

因此，您需要以multipart/form-data的形式传递数据，但是您没有传递它，它的json对象文件甚至都没有传递，因此您没有在服务器端获取文件

示例代码片段的外观：

const formData = new FormData();

// also append the other fields needs to be passed
for(let key in formRegister) {
  formData.append(key,formRegister[key]);
}

formData.append('photo',file); // <--- append your file

const config = {
    headers: {
        'content-type': 'multipart/form-data' // <-- Set header for 
    }
}

axios.put('http://localhost:8000/service/player', formData , config);

文件在服务器端的req.file中显示为未定义

1 个答案: