wangEditor 上传文件

最近在使用一个wangEditor富文本编辑器，这个富文本编辑器有一个上传文件的功能，搞了两天的时间终于终于可以成功的删除上传图片了，

遇到的问题一共有两个，一个是我使用SpringMVC，一开始上传文件后台是无法接收到的，也就是文件被拦截了

还有一个问题是是后台返回的数据格式不对，所以虽然说文件是上传到我们对应的文件夹里面了，但是前台还是一直提示文件上传错误

现在我是讲最终的展示出来，应该可以直接拿去用了:

 var editor = new wangEditor('#txtDiv');editor.customConfig.uploadImgServer = serviceUrl+'/Shopping/filecontroller/uploadfile';
/*  editor.customConfig.uploadImgFileName = 'myFileName';*/editor.customConfig.uploadImgShowBase64 = true;editor.customConfig.showLinkImg = false;editor.customConfig.debug=true;editor.customConfig.uploadImgHooks = {success: function (xhr, editor, result) {// 图片上传并返回结果，图片插入成功之后触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果console.log(result);}}editor.create();

创建wangEditor编辑器，

对应的后台java文件的是:

 @RequestMapping(value = "/uploadfile")public String uploadFile(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {log.info("-------------------开始调用上传文件uploadfile接口-------------------");String path = this.getClass().getClassLoader().getResource("/").getPath();int index = path.indexOf("Shopping");path = path.substring(0, index + "Shopping".length()) + "/WebContent/resources/upload/";DiskFileItemFactory factory = new DiskFileItemFactory();ServletFileUpload sfu = new ServletFileUpload(factory);sfu.setHeaderEncoding("UTF-8"); // 处理中文问题sfu.setSizeMax(1024 * 1024); // 限制文件大小String fileName = "";try {List<FileItem> fileItems = sfu.parseRequest(request);for (FileItem item : fileItems) {fileName = UUID.randomUUID().toString() + item.getFieldName().substring(item.getFieldName().lastIndexOf('.'), item.getFieldName().length());item.write(new File(path + "//" + fileName));}} catch (Exception e) {e.printStackTrace();}// 获取图片url地址JSONObject json=new JSONObject();JSONArray arr=new JSONArray();String imgUrl = "http://localhost:8080/Shopping/resources/upload/" + fileName;arr.add(imgUrl);json.put("errno", 0);json.put("data", arr);response.setContentType("text/text;charset=utf-8");PrintWriter out = response.getWriter();out.print(json.toString());out.flush();out.close();log.info("-------------------结束调用上传文件uploadfile接口-------------------");return "nihao";}

这样前台就可以正常的插入图片了

希望对你有所帮助

wangEditor 上传文件相关推荐

linux禁止客户端上传文件_实战 FastDFS Java 客户端上传文件
FastDFS 服务端安装参考文章:分布式文件系统之 FastDFS 安装 FastDFS Java 客户端先从 GitHub 上将项目源码克隆下来: $ git clone https://git ...
在vue中使用wangEditor上传视频
一.效果展示实现效果原本效果二.修改wangEditor源码添加插入视频panel 只修改Video.prototype._createPanel方法 // 原型 Video.prototyp ...
使用el upload标签上传文件的几种常见使用场景（前台+后台）
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录一.总体代码二.使用场景 1.添加 2.修改 3.单独上传到服务器一.总体代码 1.前端控件 ...
php 上传文件写入失败,php $_FILES上传失败 error返回值说明
用PHP上传文件时,我们会用程序去监听浏览器发送过来的文件信息,首先会通过$_FILES[fieldName]['error']的不同数值来判断此欲上传的文件状态是否正常. $_FILES[fiel ...
smartupload 上传文件时把页面编码改成gbk 解决乱码
快来java1234 吧 smartupload 上传文件时,经常会发生因为把表单设置为 enctype="multipart/form-data"而出现的中文乱码问题,本人头疼好 ...
关于上传文件的跨域问题
在进行新框架开发的过程中,需要自定义页面组件实现脱离表单的文件(图片)上传,考虑过wex5自带的attachmentsimple的自定义写法很难受,就改用了第三方插件webuploader来实现选择文 ...
html web上传文件原理,Web上传文件的原理及实现
本文为原创,如需转载,请注明作者和出处,谢谢! 现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的Commons FileUpload.还有Struts1.x和Stru ...
php利用上传文件,如何利用PHP上传文件
上载文件表单请选择文件: $upload_file=$_FILES['upload_file']['tmp_name']; $upload_file_name=$_FILES['upload_fil ...
window linux上传文件命令,windows通过cmd命令行使用sftp上传文件至linux
一问:sftp是什么? sftp 是一个交互式文件传输程式.它类似于 ftp, 但它进行加密传输,比FTP有更高的安全性.下边就简单介绍一下如何远程连接主机,进行文件的上传和下载,以及一些相关操作. ...

wangEditor 上传文件

wangEditor 上传文件相关推荐

最新文章

热门文章