Использование FileReader (), но результат не в теле формы, когда POSTed - PullRequest
0 голосов
/ 07 января 2019

Как видно из заголовка, я пытаюсь загрузить изображение в форму, 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

...