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 invocation
  • 500错误： java.lang.NullPointerException: null

• 错误分析：

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

• 解决方法

  1. 添加说明

  	$.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)
  		}
  	})
  

  2. 参数传递错误导致 （需要用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)...
  		}