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