Vue 富文本框WangEditor上传图片的时候到服务器存储图片地址到数据库特不是base64
前端要修改WangEditor空间里面的配置项
在WangEditor里面找到对应的项,进行修改
this.editor.customConfig.uploadImgShowBase64 = false // base 64 存储图片
this.editor.customConfig.uploadImgServer = this.$http.BASE_URL + '/api/file/webupload/upload?uploadPath=/wangeditor/img' // 配置服务器端地址
this.editor.customConfig.uploadImgHeaders = {} // 自定义 header
this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名
customInsert: (insertImg, result, editor) => {
// 图片上传成功,插入图片的回调 具体根据你返回的数据存储地址作为insertImg的入参
insertImg(result.url)
}
在后端写好上传代码
@RequestMapping("webupload/upload") public AjaxJson webupload( HttpServletRequest request, HttpServletResponse response,MultipartFile file) throws IllegalStateException, IOException { AjaxJson j = new AjaxJson(); String uploadPath = request.getParameter("uploadPath"); Calendar cal = Calendar.getInstance(); int year = cal.get(Calendar.YEAR); int month = cal.get(Calendar.MONTH )+1; String fileDir = FileKit.getAttachmentDir()+uploadPath+"/"+year+"/"+month+"/"; // 判断文件是否为空 if (!file.isEmpty()) { String name = file.getOriginalFilename (); if(fileProperties.isAvailable (name)) { // 文件保存路径 // 转存文件 FileUtils.createDirectory (fileDir); String filePath = fileDir + name; File newFile = FileUtils.getAvailableFile (filePath, 0); file.transferTo (newFile); j.put ("url", fileUrl + newFile.getName ()); return j; }else{ return AjaxJson.error ("请勿上传非法文件!"); } }else { return AjaxJson.error ("文件不存在!"); } }
这个是上传到服务器的某一个目录了,
下一篇我们把富文本里面添加的图片上传到七牛云
分类:
web UI
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?