Laravel在多个字段中保存多个图像

时间:2017-06-08 11:25:09

标签: laravel laravel-5 intervention

所以我有一个名为'images'的表,在其中我有数据库中的字段,如'image1''image2'等。

现在,用户正在单独上传每个图像,因此表格中有8个字段用于上传8个不同的图像,但是如何保存此服务器端?我知道如何上传1张图片,但我怎样才能为多张图片上传?

到目前为止,这是我的代码,我收到了这些错误:

  

未捕获的TypeError:无法读取未定义的属性“gallery”

  

POST http://localhost:8000/gallery 404(未找到)

控制器:

    public function gallery(Request $request) {
    if($request->hasFile('gallery'))
    {
        $image = Input::file('gallery');
        $files = count($files);
        $uploadcount = 0;
        foreach($files as $file) {
        $filename = time() . '.' . $image->getClientOriginalExtension();
        $path = public_path('gallery/' . $filename);
        $image_path = ('gallery/' . $filename);
        Image::make($image->getRealPath())->fit(60, 51)->save($path);
        $uploadcount++;
        $file = $request->file('gallery');
        $session = session()->get('key');
        $gallery = new Image();
        $gallery->image1 = $image_path;
        $gallery->business_id = $session;
        $gallery->save();
        return ['url' => url('gallery/' . $filename)];
        }
    }

AJAX:

function submitGallery() {
    var fd = new FormData($(".upload_gallery")[0]);
    fd.append('img', $('.img'));
    $.ajax({
        url: '/gallery',
        data: fd,
        dataType: 'json',
        async: false,
        type: 'post',
        processData: false,
        contentType: false,
        success: function(data) {
            $(".images").attr("src", data.url);
            $('.messages').append('<div class="alert alert-success">Image Uploaded!<div>');
            $(".alert-success").fadeOut(5000);
        },
        error: function(data) {
            var errors = data.responseJSON; //this will get the errors response data.
            //show them somewhere in the markup
            //e.g
            var errorsHtml = '<div class="alert alert-danger">';
            errorsHtml += errors.gallery[0]; //showing only the first error.
            errorsHtml += '</div>';
            $('.messages').append('<div class="alert alert-danger">File type not supported! Use files with image extension only!<div>'); //appending to a <div id="form-errors">
            $(".alert-danger").fadeOut(5000);
        }
    });
}

刀片:

 <div id="gallery" class="sortable">
                        <form class="upload_gallery" action="{{ action('BusinessController@gallery') }}" enctype="multipart/form-data" role="form" method="POST">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <div id="image1" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image2" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image3" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image4" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image5" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image6" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image7" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image8" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
                    </form>     
    </div>

路线:

Route::post('gallery', 'BusinessController@gallery');

当然,如果你知道比我的更好的做法,请告诉我,我愿意接受建议

0 个答案:

没有答案