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

這個是上傳到服務器的某一個目錄了,

下一篇我們把富文本里面添加的圖片上傳到七牛雲