Vue 富文本框WangEditor上传图片的时候到服务器存储图片地址到数据库特不是base64

本文主要是介绍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' // 后端接受上传文件的参数名

在后端写好上传代码

@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 ("文件不存在!");
        }
    }

这个是上传到服务器的某一个目录了,

下一篇我们把富文本里面添加的图片上传到七牛云

这篇关于Vue 富文本框WangEditor上传图片的时候到服务器存储图片地址到数据库特不是base64的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！