如何解决如何在“表单”中上传照片到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
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。