Question

在routes.php中，我有以下路线：

Route::post('dropzone', ['as' => 'dropzone.upload', 'uses' => 'AdminPhotoController@dropzoneUpload']);
Route::post('dropzone/delete', ['as' => 'dropzone.delete', 'uses' => 'AdminPhotoController@dropzoneDelete']);

在 AdminPhotoController.php 中，我采用以下方式：

public function dropzoneUpload(Request $request)
{
    if($request->ajax()) {  // hmm, do I really need this?
        if ($request->hasFile('file') && $request->file('file')->isValid()) {
            $image_file = $request->file('file');
            $image_name = time() . '_' . $image_file->getClientOriginalName();
            $destinationPath = 'images/photos';

            if ($image_file->move($destinationPath, $image_name)) {
                $photo = new Photo(['file_name' => $image_name, 'title' => 'No title', 'description' => 'No description']);
                \Auth::user()->photos()->save($photo);

                return \Response::json('success', 200);
            } else {
                return \Response::json('error', 400);
            }
        }
    }
}

最后，这是我的HTML＆amp; JS：

<div class="dropzone" id="dropzoneFileUpload">
</div>

<script type="text/javascript">

    Dropzone.autoDiscover = false; // to disable the auto discover behaviour of Dropzone (sami ga definisemo ispod)

    var myDropzone = new Dropzone("div#dropzoneFileUpload", {
        url: "{{ route('dropzone.upload') }}",
        headers: {
            'X-CSRF-TOKEN': '{!! csrf_token() !!}'
        }
    });

</script>

它有效，上传文件有效。但我希望删除链接以删除上传的图像。我正在阅读http://www.dropzonejs.com/上的官方文档，但我仍然不明白该怎么做。我看到有：

removedfile事件 - 每当从列表中删除文件时调用。如果您愿意，可以收听此信息并从服务器中删除该文件;
和 .removeFile（file）方法 - 如果要从dropzone中删除添加的文件，可以调用.removeFile（file）。此方法还会触发removedfile事件。

所以我开始这样，但我不知道该怎么做，如何删除这些图像：

    Dropzone.options.dropzoneFileUpload = { // div has id=dropzoneFileUpload?
        addRemoveLinks: true,  // but still link to delete is not displayed?
        dictRemoveFile: 'Remove'
    };

    myDropzone.on("complete", function(file) {
        myDropzone.removeFile(file); // What should I do here?
    });

编辑：

如果我删除此代码：

    Dropzone.autoDiscover = false;

    var myDropzone = new Dropzone("#my-dropzone", {
        url: "{{ route('dropzone.upload') }}",
        headers: {
            'X-CSRF-TOKEN': '{!! csrf_token() !!}'
        }
    });

@Manuel Azar给出的解决方案将起作用，现在显示删除链接（对于每个上传的图像）。所以，这段代码存在一些问题，缺少一些东西。

Answer 1

看看这个答案，以帮助您了解dropzone事件：

https://stackoverflow.com/a/19454507/4734404

然后，您应该向控制器添加一个操作，以便删除从DB和磁盘中删除图像的删除请求：

public function dropzoneRemove(Request $request)
{
    if($request->ajax()) { 
        $photo = Photo::find($request->photoId); //Get image by id or desired parameters

        if(File::exists($destinationPath.$photo->file_name)) //Check if file exists
            File::delete($destinationPath.$photo->file_name) //Delete file from storage

        $photo->delete()   //Delete file record from DB

        return response('Photo deleted', 200); //return success
    }
}

我建议您查看laravel的存储外观，以便在文件系统中妥善整理文件。

https://laravel.com/docs/5.2/filesystem

修改

如何添加按钮以删除每个文件预览？

从Dropzone版本3.5.0开始，有一个选项可以为您处理所有这些：addRemoveLinks。这会将删除文件元素添加到文件预览中以删除文件，如果当前正在上传文件，它将更改为取消上传（这将触发确认对话框）。

您可以使用dictRemoveFile，dictCancelUpload和dictCancelUploadConfirmation选项更改这些句子。

如果您仍想自己创建按钮，可以这样做：

<form action="/target-url" id="my-dropzone" class="dropzone"></form> <script> // myDropzone is the configuration for the element that has an id attribute // with the value my-dropzone (or myDropzone) Dropzone.options.myDropzone = { init: function() { this.on("addedfile", function(file) { // Create the remove button var removeButton = Dropzone.createElement("<button>Remove file</button>"); // Capture the Dropzone instance as closure. var _this = this; // Listen to the click event removeButton.addEventListener("click", function(e) { // Make sure the button click doesn't submit the form: e.preventDefault(); e.stopPropagation(); // Remove the file preview. _this.removeFile(file); // If you want to the delete the file on the server as well, // you can do the AJAX request here. }); // Add the button to the file preview element. file.previewElement.appendChild(removeButton); }); } }; </script>

来自常见问题解答：https://github.com/enyo/dropzone/wiki/FAQ#how-to-add-a-button-to-remove-each-file-preview

此处有关自定义dropzone属性的更多信息：http://www.dropzonejs.com/#layout

编辑2

问题在于：

Dropzone将找到带有dropzone类的所有表单元素，自动将其自身附加到其上，并将放入其中的文件上载到指定的action属性。 http://www.dropzonejs.com/#usage

或者，您可以通过实例化Dropzone类http://www.dropzonejs.com/#create-dropzones-programmatically
来创建programmaticaly的dropzones（甚至在非表单元素上）

Dropzone.autoDiscover = false; // to disable the auto discover behaviour of Dropzone (sami ga definisemo ispod) var myDropzone = new Dropzone("div#dropzoneFileUpload", {

我相信您有两个Dropzone实例，因为您正在创建另一个Dropzone对象。您应该坚持快速配置并直接编辑选项，并删除autoDiscover = false，而不是以编程方式执行。

如果你的dropzone元素id是'my-awesome-dropzone'：

<form action="/file-upload"class="dropzone" id="my-awesome-dropzone"></form>

Dropzone会自动创建一个具有camelized id名称'myAwesomeDropzone'的属性，并将其附加到当前对象。

通过执行以下操作设置Dropzone选项：

//myAwesomeDropzone = camelized version of ID = my-awesome-dropzone Dropzone.options.myAwesomeDropzone = { addRemoveLinks: true }

我已经为你做了这个最小设置的plunker，只需像你之前一样添加你的请求配置，它应该可以工作，我将addRemoveLinks设置为true，这样你就可以看到它们正在工作：

https://plnkr.co/edit/9850jCOpTwjSSxI1wS1K?p=info

Laravel 5.2＆amp; Dropzone.js - 删除（删除）上传的图像

1 个答案: