使用vue就有很多UI組件列肢，我用的是element华蜒。但是element和其他的組件都是圖片單次上傳载庭，而且比較麻煩看彼，樣式和方法寫(xiě)起來(lái)都太亂了，基本上上傳文件還是自己寫(xiě)的最舒服囚聚。文件分為單文件和多文件上傳
1 單文件?
我用的是Element,所以我會(huì)借用element的樣式和其他表單或者輸入框統(tǒng)一靖榕。
這里是的上傳input輸入框，我用絕對(duì)定位將其放在后面的input 顯示框的上面顽铸，后面的正常在文檔流中茁计，顯示正常，又將絕對(duì)定位的上傳框opacity設(shè)為0谓松，這下只能顯示后面的輸入框星压，但點(diǎn)擊輸入框的時(shí)候上傳框在因?yàn)榻^對(duì)定位在其上面践剂，所以會(huì)點(diǎn)擊到上傳框從而達(dá)到上傳文件的效果
每次上傳圖片會(huì)觸發(fā)上傳框的change事件，我們獲取到輸入框的文件娜膘，然后獲取其name逊脯，將其name賦值給filename，上面的輸入框綁定了filename的值劲绪，所以會(huì)顯示上傳圖片的文件名男窟， 這樣每次上傳文件盆赤，文件名都會(huì)是新上傳圖片的名稱贾富。
有上傳文件的接口一般是form表單的參數(shù)格式，等到提交表單的時(shí)候可以用 FormData對(duì)象去append各個(gè)參數(shù)就可以了牺六。
2 多文件上傳
多文件和上面文件思路差不多颤枪，但是有一點(diǎn)是不同的，既然多文件淑际，可以連續(xù)刪掉多個(gè)畏纲，一次添加多個(gè)，或者多次添加一個(gè)春缕，這就不能講文件名在輸入框里顯示了盗胀。
我們可以將上傳框和單文件上傳一樣，設(shè)置絕對(duì)定位在上傳按鈕或者輸入框的上面锄贼，上傳框設(shè)置multiple屬性票灰，可一次上傳多個(gè)，
我們將文件名和文件調(diào)價(jià)到不通數(shù)組宅荤，文件名數(shù)組fileList在模板里用v-for遍歷屑迂，每次上傳都可以看到下面新增的文件名，參考多文件保單圖冯键，如有需要?jiǎng)h除惹盼，我們將要將其圖片在文件名數(shù)組中的index值傳入刪減函數(shù)，刪除對(duì)應(yīng)文件名惫确，然后將其在文件數(shù)組中的同index文件刪除手报，這樣就可以實(shí)現(xiàn)不斷加不斷刪的功能。不過(guò)改化，每次刪除之前都要講輸入框的value值清空掩蛤，這樣刪除之后還可以上傳之前刪除的文件。最后還是用FormData對(duì)象添加參數(shù)所袁。
結(jié)束了盏档，這篇算是干貨了吧。我看下能不能寫(xiě)成一個(gè)vue的插件來(lái)用
https://github.com/liulinqiang121/react-collection燥爷，歡迎使用和star
