Javascript 如何上传带有某些字段的图像？

我试图上传一些必要的字段，如名称，描述图像。当我在没有图像字段的情况下插入数据时，它会工作，但当尝试上载图像文件时，它不会将数据插入数据库。谁能告诉我我的代码有什么问题吗

控制器

public function store(Request $request)
{
    $this->validate($request, [
        'cat_name' => 'required|max:255',
        'description' => 'required|min:6',
        'cat_pic' => 'required|image|mimes:jpg,jpeg,png',
    ]);

    $fileName = null;

    if ($request()->hasFile('cat_pic')) {

       $file = $request()->file('cat_pic');
       $fileName = time().'.'.$file->getClientOriginalExtension();
       $destinationPath = public_path('/uploads/products/cats/');
       $file->move($destinationPath, $fileName);  
       $this->save();
   }

    Catagories::create([
        'cat_name' => $request->input('cat_name'),
        'description' => $request->input('description'),
        'cat_pic' => $fileName,

    ]);

    Session::flash('alert', __('messages.created'));
    Session::flash('alertClass', 'success');
    return redirect()->route('catagories');
}

查看

<div class="col-md-4 offset-5">
<div class="form-group">
    <form role="form" action="<?php echo e('/products/cats') ?>" method="POST" id="createcat" >
        {{ csrf_field() }}
      <p>
        Create New Product Category
      </p>
      <div class="form-group">
        <label for="cat_name">
          Name*:</label>
          <input type="text" class="form-control"
          id="cat_name" name="cat_name" required maxlength="50">
        </div>
        <div class="form-group">
        <label for="cat_pic">Category Image* </label>
    <input data-preview="#preview" class="form-control" name="cat_pic" type="file" id="cat_pic">
    <img class="col-md-6" id="preview" height="100px" width="20px" src="">
  </div>
          <div class="form-group">
            <label for="description">
              Description*:</label>
              <textarea class="form-control" type="textarea" name="description"
              id="description" placeholder="Category Description"
              maxlength="600" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-lg btn-success btn-block" id="btncreatecat">Create</button>

          </form>
      </div>
    </div>

@endsection
@push('scripts')
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#cat_pic").change(function(){
        readURL(this);
    });
</script>

和一些JQuery来预览图像

  <script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#cat_pic").change(function(){
        readURL(this);
    });
</script>

函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#preview'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
$（“#cat_pic”）.更改（函数（）{
readURL（this）；
});

我意识到问题是我忘了在表单标签中添加

enctype=“multipart/form data”

。

我意识到问题是我忘了在表单标签中添加

enctype=“multipart/form data”

。

你需要在

标签中添加
enctype=“multipart/form data”

像这样：

<form role="#" action="#" method="#" id="#" enctype="multipart/form-data">



因此，您的表单可以发送文本以外的内容。
您需要将
enctype=“multipart/form data”
添加到
标记中

像这样：

<form role="#" action="#" method="#" id="#" enctype="multipart/form-data">



因此，您的表单可以发送除文本以外的其他内容。
您的
cat_pic
输入是
必需的
在验证中，如何在没有图像字段的情况下插入数据？数据库中的
cat\u pic
列是否接受空值？默认情况下，它不是！您的第一个问题=>当我插入没有图像字段的其他数据时（即注释函数）；然后它的作品很好，但我想添加图像字段，需要插入到数据库中..你能帮我吗？你能添加完整的HTML表单吗？是的，我做了，请检查..为什么你不使用路由名称，而不是直接的URL。例如：
您的
cat_pic
输入在验证中是
必需的
，如何在没有图像字段的情况下插入数据？数据库中的
cat\u pic
列是否接受空值？默认情况下，它不是！您的第一个问题=>当我插入没有图像字段的其他数据时（即注释函数）；然后它的作品很好，但我想添加图像字段，需要插入到数据库中..你能帮我吗？你能添加完整的HTML表单吗？是的，我做了，请检查..为什么你不使用路由名称，而不是直接的URL。例：