javascript - 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 事件:

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

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

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 会自动创建一个带有 Camel 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