У меня есть форма с несколькими текстовыми полями, которая не дает мне никаких проблем. Но у меня есть это поле файла, которое я не могу привязать к своей модели. Любые sujestions.
<template>
<v-form ref="form" @submit.prevent="submit" lazy-validation v-model="valid">
<v-card outlined>
<v-card-text>
<v-file-input
type="file"
:label="labels.user_header_photo"
v-model="form.user_header_photo"
:error-messages="errors.user_header_photo"
:rules="[rules.required('user_header_photo')]"
:disabled="loading"
@input="clearErrors('user_header_photo')"
>
</v-file-input>
<v-file-input
type="file"
:label="labels.user_profile_photo"
v-model="form.user_profile_photo"
:error-messages="errors.user_profile_photo"
:rules="[rules.required('user_profile_photo')]"
:disabled="loading"
@input="clearErrors('user_profile_photo')"
>
</v-file-input>
</v-card-text>
</v-card>
<v-divider class="mb-4 mt-4"></v-divider>
<v-card>
<v-card-text>
<v-text-field
:label="labels.user_name"
v-model="form.user_name"
:error-messages="errors.user_name"
:disabled="loading"
hint="At least 6 characters"
autocomplete="user_name"
@input="clearErrors('user_name')"
></v-text-field>
<v-text-field
:label="labels.user_subscription_fee"
v-model="form.user_subscription_fee"
:error-messages="errors.user_subscription_fee"
:disabled="loading"
autocomplete="user_subscription_fee"
@input="clearErrors('user_subscription_fee')"
></v-text-field>
</v-card-text>
</v-card>
<v-layout mt-12 mx-0>
<v-spacer></v-spacer>
<v-btn
text
:disabled="loading"
:to="{ name: 'profile' }"
color="grey darken-2"
exact
>
Cancel
</v-btn>
<v-btn
type="submit"
:loading="loading"
:disabled="loading"
outlined
color="black"
class="ml-4"
>
Save
</v-btn>
</v-layout>
</v-form>
</template>
<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
import { api } from '~/config'
import Form from '~/mixins/form'
export default {
mixins: [Form],
data: () => ({
label: {
user_header_photo: 'Upload cover image',
user_profile_photo: 'Upload profile photo',
user_name: 'user_name',
user_subscription_fee: 'user_subscription_fee',
},
form: {
name: null,
email: null,
password: null,
password_confirmation: null,
user_name: null,
user_subscription_fee: null,
user_info: null,
user_location: null,
user_website: null,
user_profile_photo: null,
user_header_photo: null,
user_private_account: null,
user_fans_counter: null,
new_subscriber_alert: null,
new_tip_alert: null,
new_private_message: null,
new_refferal_alert: null,
is_active: null,
}
}),
computed: mapGetters({
auth: 'auth/user',
setting: 'auth/setting'
}),
mounted() {
this.form = Object.assign(this.form, this.auth, this.setting)
},
methods: {
submit() {
if (this.$refs.form.validate()) {
this.loading = true
axios.put(api.path('profile'), this.form)
.then(res => {
this.$toast.success('Your profile successfully updated.')
this.$emit('success', res.data)
})
.catch(err => {
this.handleErrors(err.response.data.errors)
})
.then(() => {
this.loading = false
})
}
}
}
}
</script>
Все поля работают так, как они полагают. Только поля файла дают одинаковую ошибку. Полное приложение представляет собой SPA, использующее laravel в качестве серверной части вместе с vue, vuex