使用FileReader（）但发布时结果不在表单主体中

Question

正如标题所述，我正在尝试将图像上传到表单，Base64对图像进行编码，然后将表单提交到服务器。

这是我的视图/表格

<div class="container">
  <h1 class="title">Add Product</h1>
<form class="form" action="/add-product" method="POST">
  <input type="text" placeholder="Title" name="title"/>
  <input name="Image" type='file' onchange="encodeImageFileAsURL(this)" accept="image/*" />
  <textarea type="text" placeholder="Start Typing Here..." name="body"></textarea>
  <input type="text" placeholder="SKU" name="SKU"/>
  <input type="text" placeholder="Price" name="Price"/>
  <input type="text" placeholder="Weight" name="Weight"/>
  <input class="btn" type="submit" value="Submit">
</form>

这是我的前端js

function encodeImageFileAsURL(element) {

  var file = element.files[0];
  var reader = new FileReader();

  reader.onloadend = function() {
    console.log('RESULT', reader.result)
  }

  reader.readAsDataURL(file);
}

最后，我服务器上的代码

router.post('/add-product', function(req, res, next) {
  axios.post('https://' + API + '@insta-ecom.myshopify.com/admin/products.json/',{
      product: {
        title: req.body.title,
        body_html: req.body.body,
        images: [
          {
            attachment: req.body.image
          }
        ],
        sku: req.body.sku,
        price: req.body.price,
        weight: req.body.weight,
        tags: 'test'
      }
  })

除req.body.image以外的所有值都返回