Laravel 5.2&；Dropzone.js-删除上传的图片 - Laravel 5.2 & Dropzone.js - Remove (Delete) uploaded images

在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）方法-如果你想从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() !!}'
        }
    });

曼努埃尔·阿扎尔给出的解决方案将起作用，现在显示删除链接（对于每个上传的图像）。所以，这个代码有一些问题，缺少了一些东西。

看看这个答案可以帮助您理解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的Storage facade，以使您的文件在文件系统中组织良好。

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

编辑：

如何添加一个按钮来删除每个文件预览

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

您可以使用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-点击按钮移动-点击查看

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

编辑2

问题就在这里：

Dropzone将查找具有类Dropzone的所有表单元素，自动将其自身附加到该类，并将放入其中的文件上载到指定的action属性。http://www.dropzonejs.com/#usage
或者，您可以通过实例化Dropzone类以编程方式创建Dropzone（甚至在非表单元素上）http://www.dropzonejs.com/#create-以程序方式空投

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是"我的真棒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
}

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

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