vue.js - Quasar从axios上传文件

Question

我有一个包含多个输入的表单，其中也包括文件输入。现在，我想在 onSubmit 函数上传递这些数据。但是，有一个问题，在 quasar 文档中，我没有在脚本部分看到有关 Axios 文件上传的说明。 我读过Uploader in the quasar doc我还从 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: () => ({
    selected_file: '',
    check_if_document_upload: false,
    song_id: '',
    song_data: {
      status: true
    },
    dashData: []
  }),

Answer 1

如果类星体上传不适合您，并且您正在使用状态管理 vuex，您可以尝试编写自定义代码来完成您想要的任务。尝试使用 axios 发送 post 请求

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'>
  // prevent is to keep the page from reloading when the form gets submitted,
  // just a precaution measure
  <button type=submit @click.prevent=createEvent()>submit</button> 
</form>

希望这有帮助