[Vuejs]-Getting Image Validation Error Despite Sending Image Via Axios in Vue

by

1👍

I prepared the same environment as yours and tested it. I got the same error messages. It only works for png files. But I use mime validation instead of
using image validation, it works.

My validation:

return request()->validate(
    [
        'files.*' => 'required|mimes:jpeg,jpg,png',
    ]
);

My javascript (almost same as yours):

methods: {
    onSubmit() {
        const that = this
        this.form.append('text', this.text)
        const config = { headers: {'Content-Type': 'multipart/form-data' }}
        axios.post('/file/test', this.form, config).then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })
    },
    setFile (e) {
        for(const file of event.target.files) {
            this.form.append('files[]', file)
        }
    }
},

And also, I think it will be better to add accept attribute to the input, like:

<input type="file" multiple @change="setFile" accept="image/png, image/jpeg, image/jpg">

Hope this will help you.

Leave a comment