比較簡單，有一個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);
        // const r = new FileReader();
        // r.readAsDataURL(file);
        //
 
 r.onload = function () {
        //   insertImgFn(r.result);
        // };
      }
    };

這裡順便記錄一下在還沒有伺服器時，如何讓圖片僅僅顯示在本地，方法也同樣是在這裡呼叫 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

以上，備忘。