时间戳

首页 > 解决方案 > 通过 POST 将额外的值传递给另一个函数

reactjs - 通过 POST 将额外的值传递给另一个函数

问题描述

我在将groupIdvia 帖子传递给我的函数来处理它时遇到了一些麻烦，基本上我正在上传一张图片，但我需要通过 groupId 将它重命名为我的另一个函数上的图片，我正在使用 react 和 express 来执行此操作：

  onFormSubmit = async (event) => {
    event.preventDefault();
    const { imageFile, currentGroupId } = this.state;
    var formData = new FormData();
    formData.append('groupImage', imageFile);
    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    };
    await api.post('/fileUpload/group', { currentGroupId }, formData, config );
  }

我的路线：

router.post('/group', (req, res) => {
  fileuploadmanager.uploadFile(req, res);
});

和后端：

uploadFile(req, res) {
    const { uploadsPath } = this.porperties;
    const { currentGroupId } = req.body;//it prints but formData and config never comes here
    console.log("GROUP: ", currentGroupId);
    const storage = multer.diskStorage({
      destination: uploadsPath,
      filename: (req, file, cb) => {
        cb(null, `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`);
      },
    });

    const upload = multer({
      storage,
      limits: {
        fileSize: 1000000,
      },
      fileFilter: (req, file, cb) => {
        this.checkFileType(file, cb);
      },
    }).single('groupImage');

    upload(req, res, (err) => {
      if (err) {
        console.log(err);
      }
    });
  }

发送只是有效formData，config但如果我将 groupId 添加到端点，它就不起作用。我尝试将其附加值，formData但我无法在后端获取它，所以现在我尝试将它作为 req.body 传递，它工作正常，但我的其他参数没有传递到后端。

如何将我的 groupId、formData 和配置传递给我的后端？

编辑： api是指定我的后端 URL 的包装器。我在用着axios

import axios from 'axios';

export default axios.create({
  baseURL: process.env.REACT_APP_API_URL  
});

参考：

标签： reactjsexpress

解决方案

尝试在一个对象中发送所有数据await api.post('/fileUpload/group', { currentGroupId, formData, config }); 然后获取数据uploadFile(req, res) { const postData = req.body;；这应该可以解决问题。

推荐阅读