配置说明
前端配置server地址
上传文档,需要为 editor.config.uploadImgUrl 参数配置 server 端的地址。配置了之后,编辑器就自动显示上传功能(否则不显示)。注意,要在 editor.create() 之前完成配置。

另外 - 1,如果需要在上传的同时要传递一些自定义参数(如token)到后台,可以通过editor.config.uploadParams来配置,后台可以通过requrest来获取这些参数的值。
另外 - 2,如果需要在上传图片时候自定义设置request的headers,可通过editor.config.uploadHeaders来配置。
另外 - 3,如果你只需要上传图片功能,而不需要插入网络图片功能,在editor.create()之前配置editor.config.hideLinkImg = true;即可。前提是你已经配置好了图片上传功能,v2.1.14版本开始支持。
代码示例如下:
<div id="div1">
<p>请输入内容...</p>
</div>
<!--这里引用jquery和wangEditor.js-->
<script type="text/javascript">
var editor = new wangEditor("div1");
// 上传图片(举例)
editor.config.uploadImgUrl = "/upload";
// 配置自定义参数(举例)
editor.config.uploadParams = {
token: "abcdefg",
user: "wangfupeng1988"
};
// 设置 headers(举例)
editor.config.uploadHeaders = {
"Accept" : "text/x-json"
};
// 隐藏掉插入网络图片功能。该配置,只有在你正确配置了图片上传功能之后才可用。
editor.config.hideLinkImg = true;
editor.create();
</script>
server端获取文件数据
- 建议通过index获取:
建议通过index的方式从request.files中获取,例如var file = request.files[0];。不同的后端语言语法可能不同,可根据实际情况调整。
- 通过name获取:
如果想要通过name从request.files中获取文件,可通过以下方式:
var file = request.files["wangEditorH5File"]; // 获取 h5 方式上传的文件var file = request.files["wangEditorFormFile"]; // 获取 form 方式上传的文件var file = request.files["wangEditorPasteFile"]; // 获取粘贴截图 方式上传的文件var file = request.files["wangEditorDragFile"]; // 获取拖拽上传的文件
不同的后端语言语法可能不同,可根据实际情况调整。
注意,如果你觉得以上四个name比较繁琐,你完全可以通过配置editor.config.uploadImgFileName来将四个name统一为一个。例如,无论是哪种方式上传,你都想通过myFileName获取,可以这样配置:editor.config.uploadImgFileName = "myFileName"
- 获取自定义参数
如果你通过editor.config.uploadParams配置了上传时的自定义参数,后台可以通过request获取。注意,这里配置的参数要和图片文件一起上传,因此要使用multipart/form-data的方式上传(如下图),后台接收的时候要注意。

- 自定义设置headers
可通过editor.config.uploadHeaders设置上传图片时request的headers,上面的代码示例中设置了"Accept" : "text/x-json",那么上传图片时候会有如下效果:

server端返回规则
- 上传成功:
上传成功后,server 端需要返回(即:response)图片的 url 地址,例如:
"http://xxx.com/imgs/abc.png"
- 上传失败:
上传失败后,server 端需要返回(即:response)"error|错误信息提示..."格式的字符串。其中的错误信息提示,可以自己设置。例如:
"error|服务器端错误"

