zoukankan      html  css  js  c++  java
  • tinymce富文本编辑器如何实现上传图片

    在项目中,前端会经常使用tinymce富文本编辑器插件,编辑器有上传图片的功能,而对于上传的这个图片的处理,有两种方式:

    编辑器中有一个images_upload_handler方法,上传图片会触发该事件,该事件有3个参数,分别是上传图片的文件内容、上传成功的success处理方法、上传失败的failure处理方法。

    方式一:上传图片时将文件流给后端,后端返回附件地址

     1 images_upload_handler: (blobInfo, success, failure) => {
     2           let fd = new FormData();
     3           fd.append("file", blobInfo.blob());
     4           // 调接口,上传图片
     5           api.uploadImg(fd).then(response => {
     6    // 后端接口返回上传图片的访问地址
     7              let result = `${location.origin}/${response}`
     8    // 编辑器的上传图片内容被处理为<img src="success方法里面的参数" />
     9            success(result)
    10           })
    11         }

    方式二:上传图片时前端读取文件,转为base64格式,放在img的src中,不需要通过后端

    1 images_upload_handler: (blobInfo, success, failure) => {
    2           let base64 = "data:image/png;base64," + blobInfo.base64();
    3    //编辑器的上传图片内容被处理为<img src="success方法里面的参数" />
    4           success(base64);
    5   }
     
  • 相关阅读:
    P4839 P哥的桶 题解(线段树维护线性基)
    线性基入门
    Lowest Common Ancestor 题解(lca+思维)
    B
    java string对象的简单方法
    AtCoder Grand Contest 016 D
    FFT
    回文自动机(BZOJ2565)
    二维RMQ
    AC自动机(BZOJ1030)
  • 原文地址:https://www.cnblogs.com/grow-up-up/p/13390145.html
Copyright © 2011-2022 走看看