iview中upload組件上傳圖片，跨域

前提：先前開發了一個A項目，A項目中有一套上傳圖片的接口，如今開發B項目。

B項目開發中用iview中的upload組件上傳圖片，用到了A項目中上傳接口，爬坑經歷

1.涉及到了跨域
解決：後臺配置一下文件(阮老師的文章內容)容許我訪問A項目的接口
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

2.在使用upload組件中成功、失敗等屬性設置成了方法，致使一直沒法調取本身的方法
解決：查看文檔改爲綁定屬性

3.請求頭設置
在後臺接口中要設置指定content-type類型，實際使用組件時候若是上傳文件無需設置content-type，組件會自動設置文件類型，並設置邊界值。

4.組件中name和data的理解
後臺規定上傳格式是file[]:file(上傳文件),type:1(類型1是圖片)兩個字段
在查看源碼時，看到new FormData時候，調用append方法，格式是formData.append(key, option.data[key])
先添加data中的數據（我設置的是data="{type: 1}"）
後添加formData.append(option.filename, option.file)此時的optione.filename是name屬性（我設置的是name="file[]"）
此時就對應上了後臺給的接口字段。

5.圖片上傳成功後，還須要在跨域調取A項目中的一個接口，此時又須要cookie的信息。
我使用的axios須要在設置withCredentials: true獲取已經存在的cookie信息

整個流程梳理下，往後在碰到相似問題，以供參考。