ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
####前端配置server地址 --- 上传文档,需要为 `editor.config.uploadImgUrl` 参数配置 server 端的地址。配置了之后,编辑器就自动显示上传功能(否则不显示)。注意,要在 `editor.create()` 之前完成配置。 ![](https://box.kancloud.cn/2016-01-29_56ab6d083c7f1.png) 另外 - 1,如果需要在上传的同时要传递一些自定义参数(如`token`)到后台,可以通过`editor.config.uploadParams`来配置,后台可以通过`requrest`来获取这些参数的值。 另外 - 2,如果需要在上传图片时候自定义设置`request`的`headers`,可通过`editor.config.uploadHeaders`来配置。 另外 - 3,如果你只需要上传图片功能,而不需要插入网络图片功能,在`editor.create()`之前配置`editor.config.hideLinkImg = true;`即可。前提是你已经配置好了图片上传功能,`v2.1.14`版本开始支持。 代码示例如下: ```html <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`的方式上传(如下图),后台接收的时候要注意。 ![](https://box.kancloud.cn/2016-05-28_574965f7d417d.png) --- - **自定义设置headers** 可通过`editor.config.uploadHeaders`设置上传图片时`request`的`headers`,上面的代码示例中设置了`'Accept' : 'text/x-json'`,那么上传图片时候会有如下效果: ![](https://box.kancloud.cn/2016-05-28_574966007fad3.png) ####server端返回规则 - **上传成功:** 上传成功后,server 端需要返回(即:`response`)图片的 url 地址,例如: ``` "http://xxx.com/imgs/abc.png" ``` - **上传失败:** 上传失败后,server 端需要返回(即:`response`)`'error|错误信息提示...'`格式的字符串。其中的错误信息提示,可以自己设置。例如: ``` "error|服务器端错误" ```