ueditor 目前异步上传图片是不能用的,可以根据ueditor.all.js源码看到里面嵌套了一层iframe ,里面的代码是这样的:
wrapper.innerHTML = '<form id="edui_form_' + timestrap + '" target="edui_iframe_' + timestrap + '" method="POST" enctype="multipart/form-data" action="' + me.getOpt('serverUrl') + '" ' +
'style="' + btnStyle + '">' +
'<input id="edui_input_' + timestrap + '" type="file" accept="image/*" name="' + me.options.imageFieldName + '" ' +
'style="' + btnStyle + '">' +
'</form>' +
'<iframe id="edui_iframe_' + timestrap + '" name="edui_iframe_' + timestrap + '" style="display:none;width:0;height:0;border:0;margin:0;padding:0;position:absolute;"></iframe>';
后面会进行form submit,跨域不能用。
解决这个问题,我是这样处理的,通过nginx 进行代理:nginx.conf主要配置如下:
upstream sitweb {
server 172.25.2.101:4000; #前端项目地址172.25.2.101是本机ip
}
upstream ueditor {
server localhost:9119; #图片上传服务
}
server {
listen 8086;
server_name localhost;
#charset koi8-r;
charset utf-8;
#access_log logs/host.access.log main;
#location / {
# root html;
# index index.html index.htm;
# }
location / {
proxy_pass http://sitweb/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /nonsecservice/ {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://ueditor/nonsecservice/;
}
后端服务处理修改了源码,图片上传到zimg服务器。源码地址:https://github.com/YangDiA/yangdi-ueditor-server