Quasar загрузить файл из Axios - PullRequest
0 голосов
/ 27 февраля 2020

У меня есть форма с несколькими входами, которая также включает в себя ввод файлов. Теперь я хочу передать эти данные в функцию onSubmit. но есть проблема, в документации квазара я не видел инструкции по загрузке файла Ax ios в части скрипта. Я читаю Uploader в квазаре до c, а также читаю это из Stackoverlow , но я не работал для меня.

Кроме того, это Код моих шаблонов:

<template>
  <div class="q-pa-md q-mt-md">
    <q-card class="my-card">
      <q-form
        @submit="onSubmit"
        class="q-gutter-md"
      >
        <div class="row justify-center">
          <q-uploader
            label="Upload your music"
            color="purple"
            accept=".mp3"
            :max-file-size="20000000"
            square
            flat
            @add="file_selected"
            bordered
          />
        </div>
        <div class="row justify-center">
          <q-btn label="Edit" type="submit" color="primary" v-if="song_id" class="q-ma-md" />
          <q-btn label="Add" type="submit" color="primary" v-else class="q-ma-md" />
          <q-btn label="Cancel" type="reset" color="primary" flat class="q-ml-sm" />
        </div>
      </q-form>
    </q-card>
  </div>
</template>

И часть методов:

file_selected: function (file) {
  console.log(file)
  this.selected_file = file[0]
  this.check_if_document_upload = true
},
onSubmit: function () {
  const url = '/core/v1/api/songs/upload'
  const fileData = new FormData()
  fileData.append('file_data', this.selected_file)
  fileData.append('song_id', this.song_id)
  this.$axios.post(url, fileData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(function () {
    console.log('SUCCESS!!')
  })
    .catch(function () {
      console.log('FAILURE!!')
    })

И data Часть:

data: () => ({
    selected_file: '',
    check_if_document_upload: false,
    song_id: '',
    song_data: {
      status: true
    },
    dashData: []
  }),

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

Если квазар-загрузка не работает для вас, и вы используете vuex для управления состоянием, вы можете попытаться написать собственный код для выполнения sh того, что вы хотите. Попробуйте это для отправки запроса на публикацию с использованием ax ios

createEvents({ commit }, payload) {
  const stuff = {
    title: payload.title,
    location: payload.location,
    description: payload.description,
    image = payload.image;
  };
  let formData = new FormData();
  bodyFormData.set('title', stuff.title); //done for the text data
  formData.append("imageUrl", stuff.image);  //done for file data

  axios
    .post({
        method: 'post',
        url: 'myurl',
        data: formData,
         headers: {'Content-Type': 'multipart/form-data' }
     })
    .then(response => {
      commit("createEvents", response.data);
    })
    .catch(err => err.data);
  }
 }

А для функции (метода) отправки это должно выглядеть примерно так

createEvent(){
      const newEvent = {
        title: '',
        location: '',
        description: '',
        image: this.image,
      };
      this.$store.dispatch("createEvents", newEvent);
    };

наконец, сама форма в вашем коде. На изображение следует ссылаться простым <input type='file' ref='image'>, а остальная часть вашей формы может быть нормальной

<form>
  <input type='text' v-model='text'>
  <-- more of the same -->
  <input type='file' ref='image'>
  <button type=submit @click.prevent=createEvent()>submit</button> //prevent is to keep the page from reloading when the form gets submitted, just a precaution measure
</form>

Надеюсь, это помогло

0 голосов
/ 27 февраля 2020

Я нашел свою проблему. Я должен изменить @add на @added в шаблоне.

<template>
  <div class="q-pa-md q-mt-md">
    <q-card class="my-card">
      <q-form
        @submit="onSubmit"
        class="q-gutter-md"
      >
        <div class="row justify-center">
          <q-uploader
            label="Upload your music"
            color="purple"
            accept=".mp3"
            :max-file-size="20000000"
            square
            flat
            @added="file_selected"
            bordered
          />
        </div>
        <div class="row justify-center">
          <q-btn label="Edit" type="submit" color="primary" v-if="song_id" class="q-ma-md" />
          <q-btn label="Add" type="submit" color="primary" v-else class="q-ma-md" />
          <q-btn label="Cancel" type="reset" color="primary" flat class="q-ml-sm" />
        </div>
      </q-form>
    </q-card>
  </div>
</template>
...