dropzone文件上传成功后,无法显示从laravel控制器发送的其他json数据

时间:2017-02-03 08:48:58

标签: laravel-5.3 dropzone.js

我尝试在上传成功的dropzone js文件后使用json数据类型从laravel控制器添加自定义成功消息和其他数据,并将其作为dropzone js成功事件发送回客户端。

如果我像这样写 laravel controller

return response()->json(array('success' => true, 'message' => 'custom success message!', 'additional' => 'info'), 200);

并在我的客户中调用响应,如下所示:

<script>
    Dropzone.autoDiscover = false;
    $(document).ready(function() {
        var myDrop = new Dropzone("div#divdropzone", {

            //..edited the rest of the script..

            init: function() {
                this.on("success", function(file, response) {
                    console.log(response);
                });
            }
        });
    });
</script>

它会在我的浏览器控制台日志中出现此错误:

  

来自服务器的无效JSON响应。

如果我从laravel控制器中删除了 return response() - &gt; json (没有返回任何内容),这就是 console.log(响应); < / p>

  

ca0ba5acc1c71f922278ea9f6ad7fa4e.jpeg
JPG
C:\ WINDOWS \ TEMP \ php83D1.tmp

仅供参考,文件上传工作正常,无论是否有

返回响应() - &gt; json(数组(&#39;成功&#39; =&gt; true,&#39;消息&#39; =&gt;&#39;自定义成功消息!& #39;,&#39;其他&#39; =&gt;&#39;信息&#39;),200);

我尝试使用服务器的json响应来查看我的成功消息以及其他数据到客户端的console.log()中,以便我可以进一步处理响应例如:

init: function() {
    this.on("success", function(file, response) {
        console.log(response.message);
        console.log(response.success);
        console.log(response.additional);
    });
}

我仍然无法弄清楚我的服务器的json数据如何与dropzone on(&#34; success&#34;)响应参数进行通信。 请帮我指出我的laravel控制器或我的客户端dropzone脚本中的错误。任何帮助将非常感激。谢谢。

1 个答案:

答案 0 :(得分:1)

我只是掀起了一些东西并让它发挥作用。这是 Laravel 5.4.23 和最新的 dropzone.js
我的问题基本上是我在控制器内部仍然有一个DIEDUMP (dd)来做一些调试。

Controller / ImageHandler

// whatever logic here
return response()->json(['success' => true, 'payload' => 'My message']);

然后在我的JS里面:

Dropzone.options.myAwesomeDropzone = {
    uploadMultiple: false,
    parallelUploads: true,
    maxFilesize: "{{ dsoptions.maxfilesize }}",
    // whatever other options you got here
    init:function() {
        // .on event handlers see dropzone docs for info
    },
    error:function(file, response) {
        // error handling
    },
    success:function(file, response) {
        console.log(response.payload);
    }
}

这很简单。因此,如果我的回复中的成功是错误的,我现在可以检查并相应地调整dropzone成功函数中的消息。