wangEditor官方文档和视频并没有给到前端代码示例,虽然基本上也能判断,但是对新手不是很友好,记录下wangEditor自定义上传图片,粗浅的代码如下,有问题欢迎评论区讨论,我只会简答的,难的问题就期望评论区遇到大佬了。
后端接口
1、返回值RestBean<ImageData>
(资料图片仅供参考)
ImageData保存wangEditor中定义图片的是三个参数
单独创建RestBean<T>是方便我整个项目的统一,可以仅使用上面的ImageData
2、上传接口
url:/upload/image
参数:@RequestParam MultipartFile file
3、下载接口
url:/download/image/{imageName}
前端(主要记录内容)
1、editorConfig配置
直接在customUpload(){ }中自己的上传文件代码。
upload: 自定义的上传方法,看下面的代码
/upload/image: 对应后端接口
file: file: 第一个file对应后端需要接受的参数名file,第二个file就是方法中传进来的图片
message:对应后端RestBean中的message参数,这个保存的就是ImageData。
然后就是给inserFn传入这个参数
2、upload方法