如何将照片上传到我的表单并上传到我的 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)

我可以看到这里的问题是它显示的是空值，而不是我上传的照片的名称，这就是我收到 404 错误的原因。

这里有两张截图，一张是我填写表格的，另一张是除了照片外数据正常显示，控制台有错误信息。 注意：

补充一下，我在使用 Vue js 和 Bootstrap-Vue 之前上传了文件。我使用这样的 v-model 在文件输入上添加了一个 @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
  }
}

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

How to upload a photo in my Form and into my Vuex store?

vue.js

vuex

quasar