如何在“表单”中上传照片到Vuex商店中？

问题描述

我正在尝试使用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之前，我已经上传了文件。我在带有v模型的File输入上添加了一个@change事件，如下所示：

<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
  }
}

quasar vue.js