时间戳

首页 > 解决方案 > 我无法使用 Laravel 和 Dropzone.js 上传文件

php - 我无法使用 Laravel 和 Dropzone.js 上传文件

问题描述

我正在尝试使用 Laravel 和 Dropzone.js 作为友好的 UI 上传文件。

根据Enyo 的教程和官方文档以及本教程的西班牙语this one和that one。但我就是想不通为什么我不能在request对象中接收我实际尝试上传的文件。

我的代码如下所示：

我的观点：

<div class="box-body">
{!! Form::open(['url' => '/admin/noticias', 'files' => true], ['id' => 'form' ]) !!}
<div class="form-group {{ $errors->has('file_gallery') ? 'has-error' : ''}}">
    {!! Form::label('File', 'Arrastre fotos a esta área') !!}
    <div class="row">
        <div class="col-md-10">
            <input class="file" name="file[]" type="file" id="file" multiple/>

            <div id="mydropzone" class="dropzone">
                <!--Sector de arrastre-->
            </div>

            {!! $errors->first('file', '<p class="help-block">:message</p>') !!}
        </div>
    </div>
</div>
<button id='btn_submit' type="submit" class="btn btn-primary"><i class="fa fa-fw fa-save"></i>Save</button>{{ Form::close() }} <script type="text/javascript" src="{{asset('js/jquery-ui-1.11.4/jquery-ui.js')}}"></script>

<link rel="stylesheet" href="{{asset('js/dropzone/dropzone.css')}}">
<script type="text/javascript" src="{{asset('js/dropzone/dropzone.js')}}"></script>


<script type="text/javascript">
    $('#datepicker_ini').datepicker({
        language: 'es',
        autoclose: true
    });

    $(function () {
        Dropzone.autoDiscover = false;
        $("div#mydropzone").dropzone({
            // method: 'GET',
            url: '{{route('admin.noticias.upload_gallery')}}',
            paramName: "file_gallery",
            autoProcessQueue: false,
            uploadMultiple: false,
            addRemoveLinks: true,
            parallelUploads: 10,
            maxFilesize: 10,
            acceptedFiles: ".jpeg,.jpe,.jpg,.png,.gif,.svg",
            dictRemoveFile: 'Remover foto',
            dictDefaultMessage: "Arrastre las fotos que desea subir aquí.",
            dictFallbackMessage: "Tu navegador no soporta arrastrar y soltar fotos",
            dictFallbackText: "Por favor, use el boton de seleccionar fotos",
            dictInvalidFileType: "No puedes subir archivos de este tipo.",
            dictCancelUpload: "Cancelar subida",
            dictCancelUploadConfirmation: "¿Está seguro que quiere cancelar esta subida?",
            dictMaxFilesExceeded: "No puedes subir más archivos.",

            success: function (file, response, data) {

                $('#galeria').empty(); // supongo que esto resetea los archivos guardados

                var rows = $('div#mydropzone').children('.dz-image-preview').get();
                $.each(rows, function (index, row) {
                    // Agregar cada elemento a #galeria[]
                });
            },
            removedfile: function (file) {
                x = confirm('¿Desea remover esta foto?');
                if (!x) return false;
                file.previewElement.remove();

                $('#galeria').empty(); // supongo que esto resetea los archivos guardados

                var rows = $('div#mydropzone').children('.dz-image-preview').get();
                $.each(rows, function (index, row) {
                });

            },
            init: function () {
                var myDropzone = this;
                this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
            },
            accept: function(file) {
                let fileReader = new FileReader();

                fileReader.readAsDataURL(file);
                fileReader.onloadend = function() {

                    let content = fileReader.result;
                    $('#galeria').val(content);
                    file.previewElement.classList.add("dz-success");
                }
                file.previewElement.classList.add("dz-complete");
            }
        }).sortable({
            items: '.dz-preview',
            cursor: 'move',
            opacity: 0.5,
            containment: "parent",
            distance: 20,
            tolerance: 'pointer',
            update: function (e, ui) {

                $('#galeria').empty();
                var rows = $('div#mydropzone').children('.dz-image-preview').get();
                $.each(rows, function (index, row) {
                    // añadir al input #galeria
                });
            }
        });
    });

我的控制器看起来像这样

NewsController.php

public function store(Request $request)
{
    dd($request->file); // this returns null;
}

public function upload(Request $request)
{
    return response()->json(['success' => true], 200); // just did this, in order to provide an URL with a response
}

为什么我要像使用请求表一样保存它，那是因为我使用的是Medialibrary包（实际上还不错）。

TL; DR我想做什么？我正在尝试使用友好的 UI 上传，并使用带有请求 POST 表单的 Medialibrary 包保存图像。

到目前为止我所做的：我已经能够对图像进行排序，但是当我单击提交按钮时，$request->file_galery它是空的。我不知道为什么。

什么是我的porpouse：我想制作一个友好的用户界面，用户可以上传，排序，删除其中一些（编辑），全部删除。为了做到这一点，我在我的项目中添加了 Medialibrary 作为后端，并为前端添加了 Dropzone。

任何帮助表示赞赏。

标签： phplaraveldropzone.js

解决方案

这就是我所做的

在我的页脚中，我添加了 <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js" async></script>

这是我的表格

<form action="/upload-image"
    class="dropzone w-100"
    id="my-awesome-dropzone">
    {{csrf_field()}}
</form>

在我的路线中

Route::post('/upload-image', [
    'uses' => 'MyController@uploadImages',
    'as' => 'my_controller.uploadImages'
]);

还有我的控制器功能来上传图像

public function uploadImages(Request $request)
    {
        $image = $request->file('file');

        if($image) {
            $filenamewithextension = $request->file('file')->getClientOriginalName();

            //get filename without extension
            $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);

            //get file extension
            $extension = $request->file('file')->getClientOriginalExtension();

            //filename to store
            $filenametostore = $filename.'_'.time().'.'.$extension;

            Storage::disk('s3_driver')->put($filenametostore, fopen($request->file('file'), 'r+'), 'public');

            //do something with $filenametostore

            return "something";
        }
        else {
            return 'Fail';
        }
    }

推荐阅读