Question

我的Html代码在

之下

    <script language="JavaScript">
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });

    $(document).ready(function() {
        $('#summernote').summernote({
            lang: 'ko-KR',
            height: 300,                 // set editor height
            minHeight: null,             // set minimum height of editor
            maxHeight: null,             // set maximum height of editor
            focus: true,                // set focus to editable area after initializing summernote
            onImageUpload: function(files, editor, welEditable) {
                sendFile(files[0],editor,welEditable);
            },
        });
        function sendFile(file,editor,welEditable) {
            data = new FormData();
            data.append("file", file);
            $.ajax({
                url: '/upload/upload',
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function(data){
                    console.log(data)
                    //editor.insertImage(welEditable, data);
                    $('.summernote').summernote("insertImage", data, 'filename');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus+' '+errorThrown);
                }
            });
        }
    });
</head>
<body>
<div id="summernote">Hello Summernote</div>

</body>
</html>

和我的服务器端django视图如下：

def save(request):
    if request.method == 'POST':
        if 'file' in request.FILES:
            file = request.FILES['file']
            filename = file._name

            fp = open('%s/%s' %(UPLOAD_DIR, filename), 'wb')
            for chunk in file.chunks():
                fp.write(chunk)
            fp.close()
            return HttpResponse('http://localhost:8000/static/upload_storage/'+filename)
        return HttpResponse('Failed to uploading.')

选择要上传的文件并完成上传后，没有图像。但是在服务器端存储中，有我发送文件的图像。

Answer 1

您的上传代码看起来很好。但是最新的summernote调用自定义OnImageUpload函数只有files个参数，而不是三个。请检查浏览器控制台日志中的错误。

见： https://github.com/summernote/summernote/blob/v0.6.16/src/js/EventHandler.js#L117

请参阅javascript code of django-summernote。

图像上传完成后，summernote编辑器不显示图像

1 个答案: