Question

在富文本编辑器中，我想将本地图像上传到服务器媒体文件夹中。为此，我做了一个XMLHttpRequest。带有可下载文件的请求将发送到服务器，然后服务器上的函数将保存文件并返回其url。返回的网址应显示在“文本编辑器”对话框中。最初，我尝试了这段代码，并且使用 async：false 参数可以正常工作。在对话框中出现了文件的相对URL，我可以在视图页面上加载它。下图显示了成功的图像上传。

file_picker_callback: function(cb, value, meta) {
        if (meta.filetype == 'file') {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'MIME_type');

            input.onchange = function () {
                var file = this.files[0];
                var reader = new FileReader();

                // FormData
                var fd = new FormData();
                var files = file;
                fd.append("file",files);
                var location = "";

                // AJAX
                jQuery.ajax({
                    url: "/fileupload/file/",
                    type: "POST",
                    data: fd,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    async: false,
                    success: function(response){
                       location = response.fileurl;
                    }
                });

                reader.onload = function(){
                //call the callback and populate the Title field with the file name
                   cb(location, { download : files.name });
                };
                reader.readAsDataURL(files);
            };
            input.click();
        }
    },

但是，然后，在控制台中，我收到“由于其有害影响而弃用了主线程上的同步XMLHttpRequest”消息。然后，我更改了 async：true ，代码停止了工作。该文件仍上传到服务器，但该URL未显示在对话框中。我认为FileReader无法及时获得服务器响应。如何使FileReader等待XMLHttpRequest的结束？下面是我的Python处理程序：

@require_POST
@csrf_exempt
def file_upload(request):
    data = UploadFile.objects.create(file=request.FILES['file'], related_post_id=1,)
    return JsonResponse({'fileurl': data.file.url})

Answer 1

您只需在AJAX调用success函数中移动读取文件的代码即可。像这样：

jQuery.ajax({
    url: "/fileupload/file/",
    type: "POST",
    data: fd,
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function(response){
        var location = response.fileurl;
        reader.onload = function(){
            //call the callback and populate the Title field with the file name
            cb(location, { download : files.name });
        };
        reader.readAsDataURL(files);
    }
});

无法使用async：true

1 个答案: