Vue Tinymce富文本组件实现粘贴立即上传到后台功能

 核心代码

          urlconverter_callback: function(url, node, on_save, name) {
            if (node === 'img' && url.startsWith('blob:')) {
              tinymce.activeEditor && tinymce.activeEditor.uploadImages()
            }
            return url;
          },

该代码的具体所在位置

data() {
      return {
        //初始化配置
        init: {
          //menubar: true, // 菜单栏显隐
          //language_url: "@/components/tinymce/langs/zh_CN.js",
          language_url: '../static/tinymce/langs/zh_CN.js', // vue-cli2.x
          language: "zh_CN",
          //skin_url: "@/components/tinymce/skins/ui/oxide",
          skin_url: '../static/tinymce/skins/ui/oxide', // vue-cli2.x
          content_css: 'src/assets/fonts/FZHei.css,src/assets/fonts/FZXBSJW.css',// vue-cli2.x
          height: 630,
          min_height: 570,
          max_height: 970,
          toolbar_mode: "wrap",
          plugins: this.plugins,
          toolbar: this.toolbar,
          pasteAsPlainText: true,
          content_style: "p {margin: 5px 0;} img {max-width:100%;}",
          fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
          font_formats:
            "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;小标宋=FZXiaoBiaoSong;方正黑体=FZHei,sans-serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
          branding: false,
          paste_data_images: true,
          // 粘贴图片后自动上传
          urlconverter_callback: function(url, node, on_save, name) {
            if (node === 'img' && url.startsWith('blob:')) {
              tinymce.activeEditor && tinymce.activeEditor.uploadImages()
            }
            return url;
          },
          // 图片上传
          images_upload_handler: (blobInfo, success, failure) => {
            // const img = 'data:image/jpeg;base64,' + blobInfo.base64()
            // success(img)
            const formData = new FormData()
            formData.append('file', blobInfo.blob())
            formData.append('biz', 'rich')
            let url = config.configData.api_url  + "/sys/common/uploadA";
            utils.httpFile(url,formData).then((res) => {
                console.log('===============',res.data);
                let filePath = res.data.result.file;
                success(filePath);
            })
          }
        },
        content: this.value
      };
    },

实现上传的前端代码

          // 图片上传
          images_upload_handler: (blobInfo, success, failure) => {
            // const img = 'data:image/jpeg;base64,' + blobInfo.base64()
            // success(img)
            const formData = new FormData()
            formData.append('file', blobInfo.blob())
            formData.append('biz', 'rich')
            let url = config.configData.api_url  + "/sys/common/uploadA";
            utils.httpFile(url,formData).then((res) => {
                console.log('===============',res.data);
                let filePath = res.data.result.file;
                success(filePath);
            })
          }

java后端代码

@RequestMapping(value = "/upFiles", method = RequestMethod.POST)
    public Result upFiles(HttpServletRequest request, HttpServletResponse response) {
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        String fileType = request.getParameter("fileType");
        List result = new ArrayList<>();
        Map fileMap = multipartRequest.getFileMap();
        for (Map.Entry entity : fileMap.entrySet()) {
            MultipartFile file = entity.getValue();// 获取上传文件对象
            try {
                String fileName = file.getOriginalFilename();
                String newFile = "";
                String path = uploadpath + "/" + fileType;
                if (fileName.equals("blob")) {
                    newFile = UUID.randomUUID().toString().replace("-", "")  + ".png";
                } else {
                    String extName = fileName.substring(fileName.lastIndexOf("."));
                    newFile =  UUID.randomUUID().toString().replace("-", "") + extName;
                }
                File dest = new File(new File(path).getAbsolutePath()+ "/" + newFile);
                File dir = new File(path);
                if (!dir.exists()) {
                    dir.mkdirs();
                }
                file.transferTo(dest); // 保存文件
                result.add(fileType + File.separator + newFile);
            } catch (Exception e) {
                return Result.error("文件导入失败:" + e.getMessage());
            }
        }
        if (result.size() > 0) {
            return Result.OK(result);
        } else {
            return Result.error("文件导入失败！");
        }

    }