Laravel 5.2 & Dropzone.js - 删除（删除）上传的图片

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 和 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) 方法 - 如果要从拖放区中删除添加的文件，可以调用 .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 事件：

然后你应该为你的删除请求添加一个操作到你的控制器以从数据库和磁盘中删除图像：

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 的 Storage facade，以使您的文件在文件系统中井井有条。

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

更多关于自定义拖放区属性的信息：http://www.dropzonejs.com/#layout

编辑 2

问题在这里：

Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute. http://www.dropzonejs.com/#usage

Alternatively you can create dropzones programmaticaly (even on non form elements) by instantiating the Dropzone class http://www.dropzonejs.com/#create-dropzones-programmatically

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 会自动创建一个属性并使用骆驼 ID 名称 'myAwesomeDropzone' 并将其附加到当前对象。

因此您可以通过以下方式设置 Dropzone 选项：

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

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

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

Laravel 5.2 & Dropzone.js - 删除（删除）上传的图片

Laravel 5.2 & Dropzone.js - Remove (Delete) uploaded images

javascript

php

laravel

dropzone.js

laravel-5