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

 

以上，备忘。