• wangEditor ctrl v 粘贴图片时上传图片到自定义服务器以及File本地读取


    比较简单,有一个customUploadImg钩子函数:

        const editor = new Editor(this.$refs.editorcontainer);
        editor.config.height = 300;
        editor.config.customUploadImg = async (files, insertImgFn) => {
          for (let file of files) {
            const param = new FormData();
            param.append("file", file);
            const res = await this.$http.post(
              buildUrl("/sys/oss/upload", false),
              param,
              {
                headers: { "Content-Type": "multipart/form-data" },
              }
            );
            insertImgFn(res.data.data.url);
          }
        };

    这里顺便记录一下在还没有服务器时,如何让图片仅仅显示在本地,方法也同样是在这里调用 insertImgFn 方法,这个方法接收一个字符串的url,然后会自动在当前光标位置插入一个img标签,src即是传入 insertImgFn 的url,只要它是一个可显示的url即可。那么意思就是本地的blob url也是可以的了,所以这里有如下两种方式直接显示本地图片。

    方法一:

    for (let file of files) {
        insertImgFn(URL.createObjectURL(file));
    }

    方法二:

    for (let file of files) {
         const r = new FileReader();
         r.readAsDataURL(file);
         r.onload = function () {
             insertImgFn(r.result);
         };
    }

    补充一些课外知识:

    Blob是浏览器内支持的高级JS对象,File继承自Blob,所以File也是一种Blob,Blob如何获取暂且不管,File如何获取呢?最常见是通过input标签来获取:

    <input type="file" onchange="showFile(this)">
    
    <script>
    function showFile(input) {
      let file = input.files[0];
    
      alert(`File name: ${file.name}`); // 例如 my.png
      alert(`Last modified: ${file.lastModified}`); // 例如 1552830408824
    }
    </script>

    上面的file即是File的一个对象实例,为什么是input.files[0]?回忆一下,选择文件的时候有时是不是可以多选?多选了数组就会有多个成员,单选的话就只有一个成员。

    以上是通常的获取File实例的方式,在wangEditor里,customeUploadImg钩子方法也会传进来File的数组,里面都是File实例。刚刚说了,File实例也是Blob,有了Blob,我们有两种方法把它变成可被src或者href接收的东西:

    URL.createObjectURL(file)
    FileReader 的 readAsDataURL

    以上,备忘。

  • 相关阅读:
    Winform架构
    SQL2008多数据库查询表或删表
    hdu1114 PiggyBank
    hdu2844 Coins
    hdu2602 Bone Collector
    hdu2191 珍惜现在
    hdu1203 I NEED A OFFER!
    求推荐
    TransparentBlt
    双缓冲加载位图 WinCE
  • 原文地址:https://www.cnblogs.com/lihan829/p/16021158.html
Copyright © 2020-2023  润新知