Markdown的图片上传(结合vue)

整体思路：

• 1、在Markdown 标签上添加，两个监听。一个是添加图片时触发的方法，一个是删除图片图片是会触发的方法
• 2、在方法利用文件把图片转换为Base64传入后台，这里要注意一点， 后台像我是springboot那么它就有传值的大小限制，所以把后台的传值大小限制改一下就欧克了
• 3、就是把base64解码，转成二进制，在把二进制传换成图片就欧克了。当然，如果你要把图片存到数据库，建议存二进制(这里有个小坑就是base64前23个字符是给前端用来做识别的所以我们后台这边如果要转成图片就需要把它前23个字符去掉，不然图片打开会显示无法识别，也就是转图片失败)

上代码

第一步：往mavon-editor标签里添加，加入图片和删除图片的回调方法

第二步：vue里面的方法编写

//添加图片
handleEditorImgAdd (pos,$file) {
      console.log("开始上传图片  ",$file)
      console.log("formate4 "+$file.miniurl)
      // this.testBeas=$file.miniurl;
      // this.imgFile[pos] = $file
      axios.post('http://localhost:8080/Blog/ImgUpload', {
        "imgName":$file.name,//拿到图片名字
        "formdata":$file.miniurl//拿到图片的base64
      }).then(function (response){
        console.log(response.data)
        if (response.data.state == "success") {
          let url = response.data.data
          let name = $file.name
          if (name.includes('-')) {
            name = name.replace(/-/g, '')
          }
          if (content.includes(name)) {
            let oStr = `(${pos})`
            let nStr = `(${url})`
            let index = content.indexOf(oStr)
            let str = content.replace(oStr, '')
            let insertStr = (soure, start, newStr) => {
              return soure.slice(0, start) + newStr + soure.slice(start)
            }
            this.form.content = insertStr(str, index, nStr)
          }
        } else {
          console.log("图片上传失败")
        }
      })
    },
    //移除图片
    handleEditorImgDel (pos,$file) {
      axios.post('http://localhost:8080/Blog/ImgDelete',{
        imgName:$file.name
      }).then(function (response) {
        if (response.data.state=="成功"){
          console.log("删除图片成功")
        }else {
          console.log("删除图片失败")
        }

      })
    },

第三步：后台接收base64然后解码

@CrossOrigin//跨域设置
    @PostMapping("/Blog/ImgUpload")//博客上传图片
    public String blogImgUpload(@RequestBody String requestBody){
        System.out.println(new Date()+" coming /Blog/ImgUpload");
//        System.out.println("requestBody: "+requestBody);
        String json="";
        //这里是我自己封装的一个从json里面拿数据的方法，因为requestBody就是一个json格式的额字符串
        String imgBase64=MyUtils.JSONObjectChange(requestBody,"formdata");//拿到base64
        String imgName=MyUtils.JSONObjectChange(requestBody,"imgName");//拿到图片名字
//        将base64的前端识别信息，给去除
        imgBase64=MyUtils.removeTheHead(imgBase64);
        System.out.println(imgBase64);
        BASE64Decoder decoder = new BASE64Decoder();
        if (imgBase64==null){
            json="{\n" +
                    "    \"state\": \"失败\",\n" +
                    "    \"data\": null\n" +
                    "}";
        }else {
            //Base64解码为图片
            try {
                byte[] b = decoder.decodeBuffer(imgBase64);
                b = decoder.decodeBuffer(imgBase64);
                for(int i=0;i<b.length;++i)
                {
                    if(b[i]<0)
                    {
                        //调整异常数据z
                        b[i]+=256;
                    }
                }
                String path="D:\\项目\\我的项目\\前端文件夹\\";
                //新生成的图片
                String imgFilePath = path+imgName;
                OutputStream out = new FileOutputStream(imgFilePath);
                out.write(b);
                out.flush();
                out.close();
//                System.out.println("adf "+out.toString());
            } catch (IOException e) {
                e.printStackTrace();
            }
            json="{\n" +
                    "    \"state\": \"成功\",\n" +
                    "    \"data\": null\n" +
                    "}";
        }
        return json;
    }

这里我在放一下我，去除base64同步文件的方法。
就是这个东西，要给它去掉，这个是用来给前端用来识别base64的一个头

移除(data:image/png;base64,)

//    去除base64的前端识别字符串
    public static String removeTheHead(String base64){
        for (int i = 0; i < base64.length(); i++) {
            if (base64.charAt(i)==','){
                base64=base64.substring(i+1,base64.length());
                break;
            }
        }
        return base64;
    }

以上就是全部内容