wangeditor文件上传

初次使用 wangeditor 遇到一个小问题（文件上传问题），故写此博客 废话不都说，开始吧

方式一， 使用 wangeditor 自身的文件上传功能

常见问题 后端没有接收到参数（java.lang.NullPointerException: null ） 错误 @CrossOrigin @PostMapping("save_photo") public Object addDish(MultipartFile file , HttpResponse response) { //.... } editor.config.uploadImgMaxSize = 3 * 1024 * 1024;// 2M editor.config.uploadImgServer = '/save_photo' editor.config.uploadImgMaxLength = 2;

问题所在： 参数是对不上，在作用editor的图片上传功能时，要指明接口参数即： editor.config.uploadFileName = ‘参数’;

解决方法：

editor.config.uploadImgMaxSize = 3 * 1024 * 1024;// 2M editor.config.uploadImgServer = '/save_photo' editor.config.uploadImgMaxLength = 2; editor.config.uploadFileName = 'file'; // 指明参数

方式二 ， 自定义文件上传功能（实现 editor.config.customUploadImg 函数 ）

常见问题：

JQ报错：jquery.min.js:5 Uncaught TypeError: Illegal invocation500错误： java.lang.NullPointerException: null

错误分析：

jQuery Ajax 上传文件处理方式，使用ajax向后台发送数据时其中的图片数据的参数类型为file,属于对象，而不是一个字符串值。导致错误的出现后端 @RequestParam(value = "file",required = false) MultipartFile file 的file 参数为null

解决方法

添加说明 $.ajax({ type:"POST", url:"http://localhost:8080//save_photo", processData : false, //1. 告诉jQuery不要去处理发送的数据 contentType : false, //2. 告诉jQuery不要去设置Content-Type请求头 data:formData, success:function(res){ console.log(res) } }) 参数传递错误导致 （需要用FormData对对象进行封装） //正确写法 editor.config.customUploadImg = function (resultFiles, insertImgFn) { console.log(resultFiles) var formData = new FormData(); formData.append("file",resultFiles[0]); console.log(formData) $.ajax({ type:"POST", url:"http://localhost:8080//save_photo", processData : false, contentType : false, data:formData, /* data:{ file:resultFiles[0] // 错误写法 } */ success:function(res){ console.log(res) } }) // insertImgFn(imgUrl)... }