尽管通过VUE中的Axios发送图像，但仍会获得图像验证错误

Question

我正在处理laravel 5.8和VUE 2应用程序，其中我正在通过Axios发送图像，但我得到文件必须是图像错误错误图像。

这是我的uploader：

<div class="row">
   <div class="col-md-12 form-group">
       <input type="file" name="file" id="file" multiple class="form-control" 
        @change="setFile">
   </div>
</div>  

这是我的vue数据对象：

data(){
    return {
        form: new FormData,
        amount: null,
        selectedBmonths: [],
        student: null,
        bmonths: [],
        result: null,

        errors: null,


    }
},  

这是setFile方法，将图像添加到formdata：

setFile(event)
    {
        for(const file of event.target.files)
            this.form.append('files[]', file);
    }  

这是提交表格的subtsform方法：

submitForm()
    {
        this.clearErrors();

        this.form.append('student_id', this.student.stdId);
        this.form.append('batchId', this.student.batchId);
        this.form.append('batchfee', this.student.fee);
        this.form.append('amount', this.amount);

        for (var i = 0; i < this.selectedBmonths.length; i++) 
        {
            this.form.append('selectedBmonths[]', this.selectedBmonths[i]);
        }

        const config = { headers: {'Content-Type': 'multipart/form-data' }};
        axios.post('/university/api/discounts', this.form, config)
            .then(response => {
                //this.$router.push('/university/discounts/' + response.data.id);
                console.log(response.data);
            })
            .catch(errors => {
                this.errors = errors.response.data.errors;
                console.log(this.errors);
                for(const key in this.form)
                {
                    if(this.errors && this.errors[key] && this.errors[key].length > 0)
                    {
                        document.getElementById('err' + key).innerHTML = this.errors[key][0];
                    }
                }
            });
    },  

这是laravel验证在控制器中的函数：

private function validateData()
{
    return request()->validate(
        [
            'batchId' => 'required|integer',
            'batchfee' => 'required|integer',
            'amount' => 'required|integer|lte:batchfee',
            'student_id' => 'required|integer',
            'selectedBmonths' => 'nullable|array',
            'files.*' => 'image',
        ],
        [
            'amount.lte' => 'Discount should be less than or equal to the batch fee.',
        ]
    );
}  

i 提交 form，我收到以下错误消息：

注意：如您所见，我已经设置了右标头/配置也是，但我仍然会收到图像验证错误消息。

任何帮助都会提前赞赏。

Answer 1

我准备了与您相同的环境，并进行了测试。我收到相同的错误消息。它仅适用于PNG文件。但是我使用 mime
使用 image 验证，它可以使用。

我的验证：

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

我的JavaScript（与您的JavaScript几乎相同）：

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)
        }
    }
},

而且，我认为最好将Accept属于输入，例如：

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

希望这对您有帮助。