React node.js imgae上传错误未定义

Question

您好，我尝试将图像添加到我的服务器。所以我用 React 和后端 post 方法制作表格。但我的 file.name 未定义，我无法将文件添加到我的服务器。对于图像上传，我使用来自这里的反应组件：https://www.npmjs.com/package/react-images-upload

...
function handleSubmit(e) {
    e.preventDefault();
    const config = {
      headers: {
        'content-type': 'multipart/form-data',
      },
    };
    console.log(mainPicture);
    axios
      .post(
        prefix + '/api/add_project',
        {
          params: {
            name: name,
            description: description,
            address: address,
            used: used,
            about: about,
            mainPicture: mainPicture,
          },
        }
      )
      .then((response) => {
        alert('The file is successfully uploaded');
      })
      .catch((error) => { alert('failed')});
  }
....

<form onSubmit={handleSubmit}>
<label>
          Name:
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            type="text"
            defaultValue="Name"
          />
        </label>
<ImageUploader
          name="mainPicture"
          {...props}
          buttonText="Choose Main Project Image"
          withIcon={true}
          withPreview={true}
          onChange={setMainPicture}
          imgExtension={['.jpg', '.gif', '.png', '.gif']}
          maxFileSize={5242880}
          singleImage={true}
        />
<button type="submit">Upload</button>
</form>

我的 Node.js 后端

router.post('/api/add_project', (req, res, next) => {
  console.log("Request ---", req.body.params);
  console.log(JSON.stringify(req.body.params.mainPicture));
  if (Object.keys(req.body.params.mainPicture).length == 0) {
    return res.status(400).send('No files were uploaded.');
  }
  console.log(req.file);
  var file = req.file;
  console.log('file name: ' + file.name);
  if (
    file.mimetype == 'image/jpeg' ||
    file.mimetype == 'image/png' ||
    file.mimetype == 'image/gif'
  ) {
    file.mv('public/images/projects/' + file.name, function (err) {
      if (err) return res.status(500).send(err);
    });
  }
});

在我的 pm2 监视器中，我可以看到该文件未定义： 我是在前端还是在后端犯了错误？ 我该如何解决这个问题？

Answer 1

确保传递内容类型标头并将其作为第三个参数传递：

function postData() {
   const formData = new FormData();
   formData.append('file', fileData);
   formData.append('name', fileName);

    const config = {
      headers: {
       'content-type': 'multipart/form-data'
      }
    };

    axios.post('/upload', formData, config).then((response) => {
        console.log(response.data);
     }).catch((error) => {
        console.log(error);
     });
}