如何将我的表单中的照片上传到我的 Vuex 商店？

Question

我正在练习使用 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-model 在 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 文件上传输入和我上面的代码。

Answer 1

我现在明白了：

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