Vue / Laravel：如何验证从前端上传的文件？答案

【问题标题】：Vue / Laravel: How to validate files uploaded from the frontend?Vue / Laravel：如何验证从前端上传的文件？
【发布时间】：2020-08-17 15:57:08
【问题描述】：

我的 Vue 应用程序上有一个图像上传器，它需要多个文件。我想确保它们是图像并且具有一定的大小，如果不是，显然不要上传文件并让前端显示错误。现在，它在控制器中命中的路由如下所示：

   public function uploadAssets(UploadAssetsFormRequest $request)
    {
        if ($request->hasFile('file')) {
            $files = $request->file('file');
            $stack = [];
            foreach ($files as $file) {
                $fileName = Storage::put('/check/', file_get_contents($file->getRealPath()), ['visibility' => 'public']);
                array_push($stack, $fileName);
            }
            return response()->json($stack);
        }
    }

我的表单请求在下面并且已经过验证，但我不知道如何在控制器中应用它。

UploadAssetsFormRequest

<?php

namespace App\Http\Requests\Admin;

use Illuminate\Foundation\Http\FormRequest;

class UploadAssetsFormRequest extends FormRequest
{

    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        return [
            'files.*' => 'required|image|max:1000',
        ];
    }

    public function messages()
    {
        return [
            'files.*.max'   => 'The image is too large',
            'files.*.image' => 'Only image files are allowed.',
        ];
    }
}

【问题讨论】：

标签： laravel vue.js laravel-5

【解决方案1】：

您需要检查文件扩展名：

$extension = $file->extension();
$allowed_file_types = ['jpg','png','gif'];
if (in_array($extension, $allowed_file_types)){
//do upload
}else{
Continue;
}

检查文件大小this thread

【讨论】：

【解决方案2】：

可以使用laravel图片验证

$this->validate ($input, [
    'files.*.image' => 'image|max:200',
]):

注意：max(size) 以千字节为单位

也可以使用维度规则

$this->validate ($input, [
    'files.*.image' => 'dimensions:min_width=100,min_height=200'
]):

Laravel Image Validation

Laravel Image Dimensions Validation

【讨论】：

【解决方案3】：

您可以在验证中设置以下规则 -

 'file' => 'required|max:100|mimes:jpg,png,bmp' // 100kb, mimes must have image extensions

【讨论】：