Lumen 如何验证图像上传并在前端显示警报？

Question

我正在构建一个 Web 应用程序，使用 angular2 作为前端，使用 lumen 作为后端。我有一个用户可以上传图片的表单，但我想添加验证，以便用户只能上传有效的图像格式（JPEG、PNG、GIF 等），并且文件不能大于 32mb。如果不满足这些条件中的任何一个，我想将响应作为警报返回到我的前端

上传表单（angular2）

<form ngNoForm action=""
      target="_blank"
      method="POST"
      enctype="multipart/form-data">
  <input type="file" name="image" id="image">
  <input type="submit" value="Upload" name="submit">
</form>

我如何将它保存到数据库中

public function imageUpload(Request $request) {

    // Check to make sure file is valid and doesnt exceed 32mb or display alert

    $file = $request->file('image');
    $imagedata = file_get_contents($file);
    $base64 = base64_encode($imagedata);

    if (DB::table('paint')->where('id', 1)
                          ->update(['pic' => $base64]))
    {
         //Display alert on frontend after pic sucessfully uploaded
    }

Answer 1

public function imageUpload(Request $request) {
    $this->validate($request, [
        'image' => 'required|image|max:32.896'
    ]);
    //rest of your code
}

您可以在函数顶部调用 validate 方法。如果一个条件失败，它将返回一个您可以显示的错误。其检查：

• 如果请求包含变量图像
• 如果是图像类型（jpeg、png、bmp、gif 或 svg）
• 它的大小小于或等于 32.896 kb

更多规则可以查看：https://laravel.com/docs/5.4/validation

在您的 html 文件中，您可以执行以下操作：

<div *ngFor="let elements of errors">
  <div class="alert alert-warning" *ngFor="let element of elements">{{ element }}</div>
</div>

这取决于您希望如何显示您的消息。