Блог

Я практикуюсь в создании гибридного мобильного приложения с Quasar, Vue и Vuex. Я успешно добавил поля ввода моей формы в мой магазин Vuex, но я не знаю, как загрузить файл, в данном случае фотографию, в мою форму.

Вот мой q-файл, вводимый из моей формы, с данными.

 <q-file
 v-model="mealToSubmit.photo"
 label="Upload File"
 outlined
>
  

Данные:

 data () {
    return {
      mealToSubmit: {
        name: '',
        description: '',
        photo: null,
        grams: '',
        calories: '',
        visible: false
      }
    }
  }
  

После того, как я заполню форму и нажму Сохранить, на странице появятся все данные, за исключением выбранной мной фотографии. В консоли я получаю ошибку 404:
404  http://localhost:8080/img/null 404 (Not Found)

Я вижу, что проблема здесь в том, что вместо названия загружаемой фотографии отображается значение null, из-за чего я получаю ошибку 404.

Вот два скриншота, на одном я заполняю форму, а на втором данные отображаются правильно, за исключением фотографии, с сообщением об ошибке в консоли.

ПРИМЕЧАНИЕ:

Просто чтобы добавить к этому, я загрузил файлы перед использованием Vue js и Bootstrap-Vue. Я добавляю событие @change для ввода файла с помощью v-модели, подобной этой:

 <b-form-group label="Upload Profile Photo (optional)" label-for="photo_id">
    <b-form-file
        v-model="profileData.photo_id"
        id="photo_id"
        placeholder="Choose a file..."
        @change="attachImage"
        accept=".jpg, .jpeg, .png"
    ></b-form-file>
</b-form-group>
  

Чем в методах{}:

 methods: {
  attachImage(evt) {
    const file = evt.target.files[0];
    let reader = new FileReader();
    reader.addEventListener('load', function() {
    }.bind(this), false);
    reader.readAsDataURL(file);
  },
}
  

А затем я связываю данные с помощью FormData(); и отправляю их на серверную часть. Этот подход не работает с входными данными для загрузки файла Quasar и кодом, который у меня есть выше.

Теперь я понял это:

 <q-file
  @input="getFile"
  label="Upload file"
/>
methods: {
  getFile(file) {
    // file is in the file variable
    this.mealToSubmit.photo = file
  }
}