转:tinyMCE中图片的自定义上传

tinyMCE图片拖动到编辑框或者使用图片上传插件插入到编辑框时,需要指定上传方法,现需要使用后台接收前台上传的图片并将图片保存到服务器,之后将图片的url返回到前台做图片链接。

tinyMCE中有两种方式:

1、直接使用images_upload_url属性,该属性会在上传图片时自动访问指定的url并获取返回地址:

images_upload_url: '/image/upload',

后台需要返回{ "location": "" },指向图片url

2、使用images_upload_handler及file_picker_callback,前者用于拖动图片到编辑框中,后者用于文件选择器选择图片上传

images_upload_handler: function(blobInfo, success, failure) {
            var form = new FormData();
            form.append('files', blobInfo.blob(), blobInfo.filename());
            $.ajax({
                    url: "/image/upload",
                    type: "post",
                    data: form,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        success(data.location);
                    },
                    error: function(e) {
                        alert("图片上传失败");
                    }
                });
         },

file_picker_callback: function(callback, value, meta) {

            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.onchange = function() {
                var file = this.files[0];
                var form = new FormData();
                form.append("files", file); 
                $.ajax({
                    url: "/image/upload",
                    type: "post",
                    data: form,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        callback(data.location);
                    },
                    error: function(e) {
                        alert("图片上传失败");
                    }
                });
            };

            input.click();

        }

 form.append('files', blobInfo.blob(), blobInfo.filename());及form.append("files", file); 对应的注释为:

formData.append(name, value);
formData.append(name, value, filename);
若不需要filename,可以只传前面两个。 
————————————————
版权声明:本文为CSDN博主「ouxiaoyang5」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/ouxiaoyang5/article/details/81295579
原文地址:https://www.cnblogs.com/huahaiwujiang/p/12095184.html