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

Question

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

前端代码：

 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 的反应？

Answer 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。与邮递员截然不同，但这对我有用。

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

How to add item with image with react-redux-saga with nodejs/multer

node.js

reactjs

postman

multer