Forms 如何处理包含文件和文本输入的表单数据

我有一个表单，允许用户写一篇文章，并将其添加到论坛，如果他们愿意，他们可以选择添加照片。这都是使用mern，我设置初始文本输入，将帖子发送到后端，然后将其添加到我的mongo数据库中。然后我创建了一个单独的表单，将图像上传到aws s3，并在我的mongo数据库中对此进行了引用

有没有一种方法可以将这些组合成下面这样的一种形式

<form action='/upload' method='POST' encType='multipart/form-data'>
                                <div>
                                    <textarea
                                        type="text"
                                        maxLength={3000}
                                        value={post}
                                        onChange={e => setPost(e.target.value)}
                                        name="post"
                                        placeholder="Got a question?"
                                    />
                                    <input
                                        type='file'
                                        name='file'
                                    />
                                    <input type='submit' />
                                </div>
                            </form>

然后“post”表单只使用axios从前端发送数据，并在后端处理，就像这样

router.post('/upload', upload.single('file'), function(req, res) {
    let file = req.file
    let s3FileURL = process.env.AWS_UPLOADED_FILE_URL
    
    let s3bucket = new AWS.S3({
        accessKeyId: process.env.AWS_ACCESS_KEY,
        secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
        region: process.env.AWS_BUCKET_REGION
    })
    
    //Where you want to store your file
    let params = {
        Bucket: process.env.AWS_BUCKET_NAME,
        Key: file.originalname,
        Body: file.buffer,
        ContentType: file.mimetype,
        ACL: "public-read"
    }
    // console.log()
    
    s3bucket.upload(params, function(err, data) {
        if (err) {
            res.status(500).json({ error: true, Message: err })
        } else {
            let newFileUploaded = {
            fileLink: s3FileURL + file.originalname,
            s3_key: params.Key
        }
        let document = new Image(newFileUploaded);
        document.save(function(error, newFile) {
          if (error) {
            throw error;
          }
        })
      }
    })
  })

router.post('/forums-add-post', auth, async (req, res) => {
    try {        
        const newPost = {
            {some post info}
        }
        
        await Post.create(newPost)

        res.json(newPost)

    } catch (err) {
        console.log(err)
    }
})

要明确的是，这两种方法都是单独工作的，我只想知道在前端将它们组合成一种形式的最佳方法，这样最终的结果是相同的。但是将存储在mongo中的图像引用将与所有其他帖子信息一起位于“Post”组件中，而不是它自己的集合