不知道大家知不知道有一個**小黃鴨調試**，即在桌子上放一只小鴨子，如果遇到調試不好的bug了，就講程序一行一行的解釋給這個鴨子聽（鴨子嗎，當然得給它講的足夠仔細，它才能聽懂啊），然后解釋的過程中，你或許就能發現自己的程序問題。  因此，當你上傳圖片出錯時，先去買個小鴨子，然后對著它講下面的故事。 ---- ### 故事正式開始了 故事的主角可以是兩個人（前端 & 后端），也可以是一個人（全棧）。 --- **序幕** 1. 如果你是一位初學者，對圖片上傳這回事兒一知半解，參見：http://www.hmoore.net/wangfupeng/wangeditor2/129924 2. 你得確定你寫的程序沒有報任何的程序異常，如果有異常，請自己去查，本故事一概不管。 --- **第一集：** 根據[配置文檔](http://www.hmoore.net/wangfupeng/wangeditor2/113992)說明，要使用上傳圖片，肯定要為你的編輯器配置上傳地址： ```js var editor = new wangEditor('div1'); // 配置上傳圖片的地址 editor.config.uploadImgUrl = '/upload'; editor.create(); ``` 你只要配置了一個上傳地址，無論這個地址是否正確，此時都會顯示選擇圖片的按鈕了。如果此時沒有顯示下圖，或者點擊按鈕沒法選擇文檔，請給作者提交issue（一定要說明是什么瀏覽器）。  --- **第二集** 接下來你要確定這個地址是正確的，而不是一個無效的地址。 事先打開chrome的開發者工具，windows系統`f12`鍵即可打開，定位到這里：  運行編輯器頁面，選擇圖片、上傳，然后查看這里是的記錄。如果如下圖一樣顯示`404`，那就說明你這個地址是個空地址、無效地址。如果是這樣的話，你就別繼續往下看了，找后端開發者去要正確地址吧，要到了再重新進行這一步測試。  --- **第三集** 上文已經確定了上傳圖片的地址是有效的，但是此時可能還有錯誤。沒關系，我們繼續往下走。接下來你需要確定一下你的后臺程序是否取到了前臺傳過去的圖片。 先在后臺程序中設置調試斷點或者增加log記錄，然后在前臺選擇圖片、上傳。然后根據調試斷點和log記錄來查看`request`中是否有信息如下的`file`（不同后臺語言的查看語法不同，自己來寫）  以上截圖，可以在chrome瀏覽器的開發者工具中看到。 *這里插一句，如果不知道后臺如何查看`request`中的`file`信息，也不必再往下看了，先去搞明白這個知識* 如果能得到這個file，那就把這個file存儲到服務器的某一個文件夾中。如果得不到，就不要再繼續往下看了，先看看上面截圖中的`request`中的信息，如果你的`request`信息不像截圖中一樣，請反饋給作者。 ---- **第四集** 走到這里，就說明你得到了前臺傳來的圖片，并且已經成功的存儲到服務器的某一個文件夾。 接下來，我需要你給出一個`url`，讓我在瀏覽器中輸入這個`url`，然后回車，能得到剛才存儲的圖片，格式如`http://localhost:8011/uploadfiles/5168898981064558.jpeg`。如果你能成功給出這個圖片的`url`，那就繼續往下看，否則就不要繼續了，想辦法獲取這個`url`。  --- **第五集** 上文中得到了圖片的`url`，然后在你的后端程序最后`response`出這個url即可了。`response`出來的信息應該能在這里看到  *再插一句，如果不知道如何`response`出一個字符串，那就不要繼續了，先去搞明白這個知識* 如果能正確`response`出圖片地址，那么上傳圖片這個功能，應該就成功了。 --- **大結局** 最后解釋一下上傳圖片時輸出的`console.log`信息，有助于大家排查錯誤。  上圖中，第一塊是上傳之前的日志信息，包括使用什么方式、選擇了什么文件、什么時候開始上傳。這塊的問題應該不會太多，都是編輯器的程序控制的，用戶無需修改。 第二塊，后面的`url`，是后臺`response`出來的信息，上一集講過了。因為要求`respone`出來的是一個圖片地址，因此要將這個`url`插入到編輯區域，顯示出圖片來。 ---- 以上就是上傳圖片的整個過程，大家出錯時，哪里有問題請對號入座，盡快解決！