• 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   }
     
  • 相关阅读:
    分布式 and 集群
    时间复杂度



    线性表 & 散列表
    栈 & 队列
    数组 & 链表
    数据结构&算法
    Docket 容器引擎
  • 原文地址:https://www.cnblogs.com/grow-up-up/p/13390145.html
Copyright © 2020-2023  润新知