# 上傳圖片 & 配置 將圖片上傳到服務器上的配置方式 > **提示，如果上傳圖片提示錯誤，可以 [打開 debug 模式](http://www.hmoore.net/wangfupeng/wangeditor3/335778) （會在 `console.log` 提示錯誤詳細信息）來輔助排查錯誤。** ## 上傳圖片 參考如下代碼 ```html <div id="div1"> <p>歡迎使用 wangEditor 富文本編輯器</p> </div> <script type="text/javascript" src="/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#div1') // 配置服務器端地址 editor.customConfig.uploadImgServer = '/upload' // 進行下文提到的其他配置 // …… // …… // …… editor.create() </script> ``` 其中`/upload`是上傳圖片的服務器端接口，接口返回的**數據格式**如下（**實際返回數據時，不要加任何注釋！！！**） ```json { // errno 即錯誤代碼，0 表示沒有錯誤。 // 如果有錯誤，errno != 0，可通過下文中的監聽函數 fail 拿到該錯誤碼進行自定義處理 "errno": 0, // data 是一個數組，返回若干圖片的線上地址 "data": [ "圖片1地址", "圖片2地址", "……" ] } ``` ## 限制圖片大小 默認限制圖片大小是 5M ```javascript // 將圖片大小限制為 3M editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 ``` ## 限制一次最多能傳幾張圖片 默認為 10000 張（即不限制），需要限制可自己配置 ```javascript // 限制一次最多上傳 5 張圖片 editor.customConfig.uploadImgMaxLength = 5 ``` ## 自定義上傳參數 上傳圖片時可自定義傳遞一些參數，例如傳遞驗證的`token`等。參數會被添加到`formdata`中。 ```javascript editor.customConfig.uploadImgParams = { // 如果版本 <=v3.1.0 ，屬性值會自動進行 encode ，此處無需 encode // 如果版本 >=v3.1.1 ，屬性值不會自動 encode ，如有需要自己手動 encode token: 'abcdef12345' } ``` 如果**還需要**將參數拼接到 url 中，可再加上如下配置 ``` editor.customConfig.uploadImgParamsWithUrl = true ``` ## 自定義 fileName 上傳圖片時，可自定義`filename`，即在使用`formdata.append(name, file)`添加圖片文件時，自定義第一個參數。 ```javascript editor.customConfig.uploadFileName = 'yourFileName' ``` ## 自定義 header 上傳圖片時刻自定義設置 header ```javascript editor.customConfig.uploadImgHeaders = { 'Accept': 'text/x-json' } ``` ## withCredentials（跨域傳遞 cookie） 跨域上傳中如果需要傳遞 cookie 需設置 withCredentials ```javascript editor.customConfig.withCredentials = true ``` ## 自定義 timeout 時間 默認的 timeout 時間是 10 秒鐘 ```javascript // 將 timeout 時間改為 3s editor.customConfig.uploadImgTimeout = 3000 ``` ## 監聽函數 可使用監聽函數在上傳圖片的不同階段做相應處理 ```javascript editor.customConfig.uploadImgHooks = { before: function (xhr, editor, files) { // 圖片上傳之前觸發 // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，files 是選擇的圖片文件 // 如果返回的結果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳 // return { // prevent: true, // msg: '放棄上傳' // } }, success: function (xhr, editor, result) { // 圖片上傳并返回結果，圖片插入成功之后觸發 // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果 }, fail: function (xhr, editor, result) { // 圖片上傳并返回結果，但圖片插入錯誤時觸發 // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果 }, error: function (xhr, editor) { // 圖片上傳出錯時觸發 // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象 }, timeout: function (xhr, editor) { // 圖片上傳超時時觸發 // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象 }, // 如果服務器端返回的不是 {errno:0, data: [...]} 這種格式，可使用該配置 // （但是，服務器端返回的必須是一個 JSON 格式字符串！！！否則會報錯） customInsert: function (insertImg, result, editor) { // 圖片上傳并返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！） // insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果 // 舉例：假如上傳圖片成功后，服務器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片： var url = result.url insertImg(url) // result 必須是一個 JSON 格式字符串！！！否則報錯 } } } ``` ## 自定義提示方法 上傳圖片的錯誤提示默認使用`alert`彈出，你也可以自定義用戶體驗更好的提示方式 ```javascript editor.customConfig.customAlert = function (info) { // info 是需要提示的內容 alert('自定義提示：' + info) } ``` ## 自定義上傳圖片事件 如果想完全自己控制圖片上傳的過程，可以使用如下代碼 ```javascript editor.customConfig.customUploadImg = function (files, insert) { // files 是 input 中選中的文件列表 // insert 是獲取圖片 url 后，插入到編輯器的方法 // 上傳代碼返回結果之后，將圖片插入到編輯器中 insert(imgUrl) } ```