配置说明
前端配置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|服务器端错误"