如何使用 nodejs/multer 使用 react-redux-saga 添加带有图像的项目答案

【问题标题】：How to add item with image with react-redux-saga with nodejs/multer如何使用 nodejs/multer 使用 react-redux-saga 添加带有图像的项目
【发布时间】：2019-08-20 12:34:27
【问题描述】：

我正在尝试保存表单中包含图像的项目。我能够使用邮递员保存项目，但在尝试从 react-redux-saga 时遇到问题。我正在为表单使用蚂蚁设计。

前端代码：

 handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { fileList } = this.state;
        const formData = new FormData();
        fileList.forEach(file => {
          formData.append("files[]", file);
        });

        const postItemData = { ...values, images: formData };
        this.props.createItem(postItemData);
      }
    });
  };

传奇：

当我尝试控制台时，我可以使用图像字段作为表单数据来获取项目详细信息

{
    let itemData = yield select(makeSelectPostItemData());
    const token = yield select(makeSelectToken());
    console.log(itemData, "itemData");
    const response = yield call(request, `/item`, {
      method: "POST",
      headers: {
        Authorization: `${token}`
      },
      body: JSON.stringify(itemData)
    });
    const successMessage = "Item saved successfully!";
    yield put(postItemSuccess(response, successMessage));
  }

nodejs：

const upload = multer({
  storage: storage,
  limits: { fileSize: 1000000 },
  fileFilter: function(req, file, cb) {
    checkFileType(file, cb);
  }
}).array("images");

upload(req, res, err => {
    if (err) {
      console.log(err, "error");
      res.send({ msg: err });
    } else {
      console.log(req, "req");
      if (req.files === undefined) {
        res.send({ msg: "Error: No file selected!" });
      } else {
        const { errors, isValid } = validatePostItem(req.body);
        // check validation
        if (!isValid) {
          return res.status(400).json(errors);
        }

        const files = req.files;
      }
    }
  });

在最后一行const files = req.files。当我从邮递员那里尝试时，我得到了文件详细信息，但是当我尝试从反应中请求它时，我没有 req.files。我如何从邮递员那里获取 req.files？

【问题讨论】：

标签： node.js reactjs postman multer

【解决方案1】：

我已经找到了解决方案。在 handleSubmit 中，我有以下代码：

 fileList.forEach(file => {
          formData.append("files[]", file);
        });

        const postItemData = { ...values, images: formData };
        this.props.createItem(postItemData);

我没有在图像中传播值并将 formData 插入，而是将它们全部放入 formData。

 fileList.forEach(file => {
          formData.append("files[]", images);
        });

 formData.append("name", values.name);
 formData.append("price", values.price);
 formData.append("detail", values.detail);

 this.props.createItem(formData);

有了这个，我可以在节点端获得req.files 和req.body.name, req.body.price, req.body.detail。与邮递员完全不同，但这对我有用。

【讨论】：