VueJS загрузить изображение с дополнительными данными

Question

Я пытаюсь загрузить изображение на сервер и одновременно передать некоторые дополнительные данные (в том же почтовом запросе), используя: VueJS 2 (CLI 3), axios, multer, sharp, и у меня NodeJS сMongoDB в бэкэнде.

Внешний интерфейс:

<form @submit.prevent="onSubmit" enctype="multipart/form-data">
   <div class="input">
      <label for="name">Name: </label>
        <input
          type="text"
          id="name"
          v-model="name">
    </div>
    <div class="input">
        <label for="last_name">Your last_name: </label>
        <input
              type="text"
              id="last_name"
              v-model="last_name">
     </div>
     <div class="input">
        <label for="permalink">permalink</label>
        <input
              type="text"
              id="permalink"
               v-model="permalink">
     </div>
     <div class="input">
       <label for="price">price</label>
       <input
             type="text"
             id="price"
             v-model="price">
      </div>
      <div class="input">
        <label for="photo">photo</label>
        <input
          style="display: none"
          type="file"
          id="photo"
          @change="onFileSelected"
          ref="fileInput">
        <div @click="$refs.fileInput.click()">Pick file</div>
        </div>
        <div class="submit">
          <md-button type="submit" class="md-primary md-raised">Submit</md-button>
        </div>
</form>

Методы VueJS:

import axios from 'axios'
export default {
  data () {
    return {
      name: '',
      last_name: '',
      permalink: '',
      selectedFile: null,
      url: null,
      price: 0,
      second: false
    }
  },
  methods: {
    onFileSelected (event) {
      this.selectedFile = event.target.files[0]
      this.url = URL.createObjectURL(this.selectedFile)
    },
    onUpload () {
      const fd = new FormData()
      fd.append('image', this.selectedFile, this.selectedFile.name)
      axios.post('http...', fd, {
        onUploadProgress: uploadEvent => {
          console.log('Upload Progress ' + Math.round(uploadEvent.loaded / uploadEvent.total * 100) + ' %')
        }
      })
        .then(res => {
          console.log(res)
        })
    },
    onSubmit () {
      const fd = new FormData()          
      fd.append('image', this.selectedFile, this.selectedFile.name)
      fd.append('data', this.name, this.last_name)

      axios.post('http://localhost:7000/api/create-user', fd, {
        onUploadProgress: uploadEvent => {
          console.log('Upload Progress ' + Math.round(uploadEvent.loaded / uploadEvent.total * 100) + ' %')
        }
      })
        .then(res => {
          console.log(res)
          if (res.data === 'ok') {
            this.second = true
          }
        })
        .then(
          setTimeout(function () {
            this.second = false
            this.reset()
          }.bind(this), 2000)
        )
        .catch(error => console.log(error))
    }
  }
}

NodeJS:

controller.postCreateUser = (req, res) => {
  const sharp = require('sharp');
  const fs = require('fs');
  const folderImg = 'backend/uploads/';
  console.log(JSON.stringify(req.body));
  console.log(req.file);
  res.send("ok");    
};

Результаты req.file (что хорошо):

{ fieldname: 'image',
  originalname: 'musk.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  destination: 'backend/uploads/original/',
  filename: 'musk-1545470459038.jpg',
  path: 'backend\\uploads\\original\\musk-1545470459038.jpg',
  size: 108787 }

Результаты console.log (req.body):

{"data":""}

Проблема здесь данные содержат пустую строку, и я не получаю никаких данных.Мне нужно иметь данные для хранения в моей базе данных.Как это сделать?

Если что-то не очень понятно для вас, попросите у меня более подробную информацию.

Answer 1

В вашем методе onSubmit вы делаете это:

const fd = new FormData()
fd.append('image', this.selectedFile, this.selectedFile.name)
fd.append('data', this.name, this.last_name)

Но FormData.append () ожидает следующие параметры:

• name - Имя поля, данные которого содержатся в значении.
• value - Значение поля.Это может быть USVString или Blob (включая подклассы, такие как File).
• filename Необязательно - имя файла, сообщаемое серверу (USVString), , когда Blob илиФайл передается в качестве второго параметра.

Третий параметр не применяется в этой строке: fd.append('data', this.name, this.last_name)

Вместо этого вы можете выполнить одно из следующих действий:

fd.append('data', `${this.name} ${this.last_name}`) // Send a single String

или

// Send both Strings separately
fd.append('name', this.name)
fd.append('last_name', this.last_name)

или

// Send the data as JSON
fd.append('data', JSON.stringify({name: this.name, last_name: this.last_name}))