上传前验证文件扩展名和大小

Question

我尝试制作一个文件上传器，它应该能够上传 mimes，即：.jpg, .jpeg, .pdf, .bmp, .png, .doc & .docx。我还提出了一个请求规则如下：

StoreFileRequest.php

public function rules()
{
    'files.*' => [
        'mimes:jpg,jpeg,pdf,bmp,png,doc,docx',
        'max:20000',
    ],
}

控制器

use App\Http\Requests\Backend\StoreFileRequest;

public function store(StoreFileRequest $request)
{
    if($request->hasFile('files'))
    {
        foreach ($files as $file) {
            //file Mime type
            $fileMimeType=$file->getClientMimeType();

            //change filename to laravel generated name using above extention
            $filename=$file->hashName();

            //upload file
            $path=$file->storeAs('public/user-existing-health-reports/'.auth()->user()->uuid,$filename);
        }
    }
}

刀片

{!! Form::file('files[]',
    array('class' => 'form-control btn btn-file ',
    'accept'=>'.jpg, .jpeg, .pdf, .bmp, .png, .doc, .docx',
    'multiple',
    'required',
    )) !!}

尽管有上述验证规则，假设我尝试上传 .zip 和 .rar 文件，这些文件位于 1GB。该文件首先被上传，这需要相当长的时间，然后在验证后抛出错误。

我的问题：我需要在用户单击提交按钮时验证文件扩展名和大小，然后再上传文件以通过验证器进行验证。

Answer 1

一旦收到请求数据，验证规则和请求数据验证就会在服务器上进行。

因此，即使您尝试上传 2GB 文件或 zip 文件，它也必须先到达服务器，然后才能根据验证规则进行验证。

您还必须在前端实现一些验证以防止此类问题。

例如，您可以在前端（通过 javascript）检查正在上传的文件的 mime 类型和大小，并且只有当它在前端通过验证时才允许使用上传的文件向服务器发出请求。

但是，永远不要只依赖前端的验证。必须在服务器级别进行验证。

例如验证上传的文件大小不超过 20MB

function isValidSize(file) {
    const errors = [];

    const maxUploadSizeInBytes = 20 * 1024 * 1024;

    let valid = true;

    if (file.size > maxUploadSizeInBytes) {

        valid = false;

        let sizeInKb = maxUploadSizeInBytes / 1024;

        let sizeForHumans = sizeInKb < 1024
            ? `${sizeInKb} KB`
            : `${sizeInKb / 1024} MB`;

        this.errors.push(
            `The file exceeds the maximum allowed size of ${sizeForHumans}`
         );
    }

    return valid;
}

根据允许的 mime 类型验证上传文件的 mime 类型的功能

isValidType(file) {
    const errors = [];

    let acceptedMimes = "jpg,jpeg,png,webp"
        .trim()
        .split(",")
        .map(type => `image/${type}`);

    let valid = true;

    if (!acceptedMimes.includes(file.type)) {
        valid = false;

        let phrase = acceptedMimes.replace(/,/g, " or ");

        this.errors.push(
            `The file type is not allowed. Please upload ${phrase} file.`
        );
     }

     return valid;
}

必须在服务器（后端）上进行验证

前端验证是为了更好的用户体验和节省一些不必要的网络请求

Answer 2

为什么不在控制器中使用 Request 并调用 Request。

'files.*' => 'mimes:jpeg,jpg,png,pdf|max:1024',

不要使用逗号使用 OR 运算符来使用文件类型

PS：1024 KB，即 1MB

Answer 3

使用这样的东西：

if(isset($_FILES['uploaded_file'])) {
    $errors     = array();
    $maxsize    = 2097152;
    $acceptable = array(
        'application/pdf',
        'image/jpeg',
        'image/jpg',
        'image/gif',
        'image/png'
    );

    if(($_FILES['uploaded_file']['size'] >= $maxsize) || ($_FILES["uploaded_file"]["size"] == 0)) {
        $errors[] = 'File too large. File must be less than 2 megabytes.';
    }

    if((!in_array($_FILES['uploaded_file']['type'], $acceptable)) && (!empty($_FILES["uploaded_file"]["type"]))) {
        $errors[] = 'Invalid file type. Only PDF, JPG, GIF and PNG types are accepted.';
    }

    if(count($errors) === 0) {
        move_uploaded_file($_FILES['uploaded_file']['tmpname'], '/store/to/location.file');
    } else {
        foreach($errors as $error) {
            echo '<script>alert("'.$error.'");</script>';
        }

        die(); //Ensure no more processing is done
    }
}

使用此 html 代码甚至不允许上传文件：

<input type="file"
       id="avatar" name="avatar"
       accept="image/png, image/jpeg">

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file