dropzone服务器实现答案

【问题标题】：dropzone server implementationdropzone服务器实现
【发布时间】：2018-02-23 05:07:33
【问题描述】：

我刚开始使用 dropzone 插件，并且在我的项目中使用 laravel。我想知道如何上传文件，以便将它们存储在我的数据库中。这是我的看法：

<form action="{{route('realisation.storeimg')}}" method="POST" files="true" enctype="multipart/form-data"
      data-toggle="validator" role="form" class="dropzone" id="my-awesome-dropzone">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="table table-striped" class="files" id="previews">
        <div id="template" class="file-row">
            <!-- This is used as the file preview template -->
            <div>
                <span class="preview"><img data-dz-thumbnail/></span>
            </div>
            <div>
                <p class="name" data-dz-name></p>
                <strong class="error text-danger" data-dz-errormessage></strong>
            </div>
            <div>
                <p class="size" data-dz-size></p>
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"
                     aria-valuenow="0">
                    <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                </div>
            </div>
            <div>
                <button class="btn btn-primary start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
                <button data-dz-remove class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
                <button data-dz-remove class="btn btn-danger delete">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
            </div>
        </div>
    </div>
    <input type="hidden" name="realisation_id" value="{{$realisation->id}}">

</form>

我的上传路线：

Route::post('/storeimg',[ 'as'=>'realisation.storeimg', 'uses'=>'RealisationController@storeimg' ]);

我的控制器：

 public function storeimg (Request $request)
{    
    $realisation                = Realisation::where('id','realisation_id')->first();
    if($request->file('image')) {
        foreach ($request->file('image') as $image) {

        $realisation_image      =   Realisationimg::where('realisation_id','realisation_id')->first();       
        File::delete($realisation_image->image);
        File::delete($realisation_image->image_thumb);



        $extension = $image->getClientOriginalExtension();
        $name = substr($image->getClientOriginalName(), 0, -4);
        list($width, $height) = getimagesize($image);
        $imgname = str_slug($name, '_');
        $filename = $imgname.'.'.$extension;
        if(file_exists('uploads/realisationimg/cover/' . $filename)){
            do {
                $newname = $imgname.'_'.str_random(3) . '.' . $extension;
            } 
            while(file_exists('uploads/realisationimg/cover/' . $newname));
            $filename = $newname;
        }

        $path = 'uploads/realisationimg/cover/'.$filename;
        $path_thumb = 'uploads/realisationimg/thumb/'.$filename;

        $save = Image::make($image->getRealPath())->resize(1600, null, function ($constraint){
            $constraint->aspectRatio();
        })->save($path);

        $save = Image::make($image->getRealPath())->resize(1600, null, function ($constraint){
            $constraint->aspectRatio();
        })->save($path_thumb);


        $realisation_image->image          =   $path;
        $realisation_image->image_thumb    =   $path_thumb;
        $realisation_image->realisation_id =   $id;
        $realisation_image->save();

    }
    }
    Session::flash('ajouter','ok');
    return redirect(route('realisation.edit',['id'=>$request->get('realisation_id')]));
}

在 dropzone.js 文件中，我将默认选项更改为以下内容：上传多个：真，参数名称：“图像”，当我提交 dropzone 表单时，没有任何内容被执行（没有文件被存储，我的数据库中也没有任何内容）。有人可以指出我的错误吗？谢谢。

【问题讨论】：

你试过什么？ Dropzone是JS，你的JS在哪里？你现在在后端有什么？
你还有 2 个类
我将 js 文件的参数名称更改为 image 并多次上传 true，并且我的控制器中已经有了存储功能，但似乎什么也没发生

【解决方案1】：

这里是可能有帮助的示例代码。

路线：

Route::post('/storeimg', 'GalleryController@storeimg')
        ->name('realisation.storeimg');

控制器：

public function storeimg(Request $request)
    {

        $path = $request->file('file')->store('public/photo');
            if (!$path)
                return url('storage');
            $dirs = explode('/', $path);
            if ($dirs[0] === 'public')
                $dirs[0] = 'storage';

            $data['image'] =  url(implode('/', $dirs));
            Photo::create($data);
            session()->flash('success', 'Photos uploaded successfully');
            return response()->json(['success'=>$data['image']]);

    }

查看：只需打开文件即可将文件发送到控制器。

{!! Form::open([ 'route' => [ 'realisation.storeimg'], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'image-upload' ]) !!}

{!! Form::close() !!}

<link rel="stylesheet" href="../dropzone.min.css">

<script src="../dropzone.min.js"></script>

<script type="text/javascript">
    Dropzone.options.imageUpload = {
        maxFilesize         :       1,
        acceptedFiles: ".jpeg,.jpg,.png,.gif"
    };

    //Remove Photo
    $("body").on("click",".remove-item",function(){
        var id = $(this).parent("td").data('id');
        var c_obj = $(this).parents("tr");
        console.log(id);
        $.ajax({
            dataType: 'json',
            type:'delete',
            url: url + '/' + id,
        }).done(function(data){
            c_obj.remove();
        });
    });
</script>

这会导致一个放置框，您可以在其中一次添加多张照片

【讨论】：

我已经在控制器中设置了路由和存储功能，但是什么也没发生
dropzone 对 Ajax 很有用。检查您在控制台中遇到什么错误
我昨天解决了这个问题，上传工作正常。今天我尝试使用 dropzone 插件上传文件，但出现此错误“dropzone.js:1503 POST 127.0.0.1/mandarine-2017-09-11/public/administrator/blog/…500 (Internal Server Error)”