上传图片显示服务器返回错误什么意思,上传图片出错时的解决步骤
不知道大家知不知道有一個**小黃鴨調試**，即在桌子上放一只小鴨子，如果遇到調試不好的bug了，就講程序一行一行的解釋給這個鴨子聽(鴨子嗎，當然得給它講的足夠仔細，它才能聽懂啊)，然后解釋的過程中，你或許就能發現自己的程序問題。
因此，當你上傳圖片出錯時，先去買個小鴨子，然后對著它講下面的故事。
----
### 故事正式開始了
故事的主角可以是兩個人(前端 & 后端)，也可以是一個人(全棧)。
---
**序幕**
1. 如果你是一位初學者，對圖片上傳這回事兒一知半解，參見：http://www.kancloud.cn/wangfupeng/wangeditor2/129924
2. 你得確定你寫的程序沒有報任何的程序異常，如果有異常，請自己去查，本故事一概不管。
---
**第一集：**
根據[配置文檔](http://www.kancloud.cn/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`插入到編輯區域，顯示出圖片來。
----
以上就是上傳圖片的整個過程，大家出錯時，哪里有問題請對號入座，盡快解決！
總結
以上是生活随笔為你收集整理的上传图片显示服务器返回错误什么意思,上传图片出错时的解决步骤的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 流利阅读 2019.1.8 Taylor
- 下一篇： 纪念一下学写pipeline时脑子里的坑