PUT 请求 - 上传文件 - React / Express / Multer - req.file = undefined答案

【问题标题】：PUT Request - Uploading a file - React / Express / Multer - req.file = undefinedPUT 请求 - 上传文件 - React / Express / Multer - req.file = undefined
【发布时间】：2022-08-19 21:13:06
【问题描述】：

我正在为一个学校项目开发一个社交网络，我想让用户更新他/她的信息，特别是个人资料照片和封面照片。

我使用multer 来存储图像。

当我尝试使用 POST 请求上传图像时，它工作得非常好，但是在 PUT 请求上它说req.file /req.files 始终未定义.

// FORM (IMPORTANT PART) 
<form
          className=\"update__form\"
          onSubmit={handleSubmit}
          encType=\"multipart/form-data\"
          id=\"form\"
        >
          {/* GESTION PHOTO DE COUVERTURE */}
          <div className=\"update__form-cover\">
            <input
              type=\"file\"
              name=\"coverPhotoUrl\"
              className=\"update__form-cover-input\"
              id=\"cover\"
              accept=\"image/*\"
              onChange={handleCover}
            />
            <div className=\"update__form-cover-button\">
              Modifier la photo de couverture
            </div>
          </div>
          <div
            className={
              loadCover === true
                ? \'update__form-cover-img\'
                : \'update__form-cover-img--close\'
            }
          >
            <img id=\"coverImg\" alt=\"ok\" />
          </div>
          {/* GESTION PHOTO DE PROFIL */}
          <div className=\"update__form-profile\">
            <input
              type=\"file\"
              name=\"profilePhotoUrl\"
              className=\"update__form-profile-input\"
              id=\"profile\"
              accept=\"image/*\"
              onChange={handleProfile}
            />
            <div className=\"update__form-profile-button\">
              Modifier la photo de profil
            </div>
          </div>
          <div
          
 //   MY DIFFERENTS FUNCTIONS
   // TO DISPLAY AND STORE THE NEW COVER (USESTATE)
   const handleCover = () => {
    const coverChange = document.getElementById(\'cover\').files

    if (coverChange.length > 0) {
      const fileReader = new FileReader()

      fileReader.onload = function (event) {
        document
          .getElementById(\'coverImg\')
          .setAttribute(\'src\', event.target.result)
        setLoadCover(true)
        setData({
          ...data,
          coverPhotoUrl: coverChange[0],
        })
      }
      fileReader.readAsDataURL(coverChange[0])
    }
  }

  // DISPLAY AND STORE THE NEW PROFILE PHOTO (USESTATE)
  const handleProfile = () => {
    const profileChange = document.getElementById(\'profile\').files
    setData({
      ...data,
      profilePhotoUrl: profileChange[0].name,
    })

    if (profileChange.length > 0) {
      const test = new FileReader()

      test.onload = function (event) {
        document
          .getElementById(\'profileImg\')
          .setAttribute(\'src\', event.target.result)
        setLoadProfile(true)
      }
      test.readAsDataURL(profileChange[0])
    }
  }

  // FUNCTION CALLED WHEN FORM IS SUBMITTED
  const handleSubmit = (event) => {
    event.preventDefault()

    try {
      updateUser(data)
    } catch (err) {
      console.log(err)
    }
  }

// FUNCTION TO FETCH PUT 
const updateUser = (data) => {
  console.log(data)
  const userId = localStorage.getItem(\'userId\')
  fetch(\'http://localhost:8000/api/user/\' + userId, {
    method: \'PUT\',
    headers: {
      \'Content-Type\': \'form-data\',
    },
    body: JSON.stringify(data),
  })
}

export default updateUser

// BACK CONFIG
const multer = require(\'multer\');

const MIME_TYPES = {
    \'image/jpg\': \'jpg\',
    \'image/jpeg\': \'jpeg\',
    \'image/png\': \'png\',
    \'image/svg\': \'svg\',
}

const storage = multer.diskStorage({
    destination: (req, file, callback) => {
        callback(null, \'../images\')
    },
    filename: (req, file, callback) => {
        const name = file.originalname.split(\' \').join(\'_\');
        const extension = MIME_TYPES[file.mimetype];
        callback(null, name + Date.now() + \'.\' + extension);
    }
});

const upload = multer({ storage: storage });
router.put(\'/:id\', upload.array(), userCtrl.updateUser);

// CONTROLLER (not very important HERE BUT RETURN REQ.FILE UNDEFINED)
exports.updateUser = ((req, res, next) => {
    console.log(req.file)
    console.log(req.files)
    const userInfos = req.file ? {
        ...JSON.parse(req.body.data),
        coverPhotoUrl: `${req.protocol}://${req.get(\'host\')}/images/${req.file.filename}`
    } : {
        ...req.body
    };

    delete userInfos._userId;

    User.findOne({
        _id: req.params.id
    })
        .then((user)=> {
            User.updateOne({
                _id: req.params.id
            },
            {
                ...userInfos,
                _id: req.params.id
            })
                .then(()=> res.status(200).json({ message : \'infos mises à jour ! \'}))
                .catch((error)=> res.status((401)).json({ error }));
        })
        .catch((error)=> res.status(400).json({ error }));
});

我听说过 formData 构造函数，但在我的情况下它并没有真正运行

标签： reactjs mongodb express multer

【解决方案1】：

如果有人来，我终于找到了答案：

首先：使用 formData 构造函数form-data-infos mdn，将您的数据放入 (formdata.append()) 第二：关于谁将获取的功能（从前到后）：只需删除'content-type'，浏览器会自动设置这个，它应该可以正常运行

【讨论】：