1.最近產(chǎn)品來了一個需求，在原有上傳圖片的基礎(chǔ)上和也可以上傳視頻一起。

O(∩_∩)O哈哈~對于我這個前端小白來說 直接去element的upload官網(wǎng)看https://element.eleme.io/#/zh-CN/component/upload

2.element的upload是可以上傳文件的，只要不限定上傳的文件類型都可以成功。但是

上傳視頻后渲染是不成功的，因?yàn)樯闪薸mg標(biāo)簽，所以上傳圖片是可以渲染的

圖片是ok的！

3.這時(shí)候我就有個想法了，這個組件有沒有上傳時(shí)候可以把圖片和視頻分開渲染不就可以啦

小伙伴們可以點(diǎn)擊在線運(yùn)行上傳的時(shí)候加個判斷如果是圖片類型就是img標(biāo)簽；如果是視頻類型就是video標(biāo)簽 我測試下可以的。但是提前 后臺需要給你個上傳的action 可以返回上傳視頻的url

4.雖然這個方法可行，但是本身這個項(xiàng)目寫的有點(diǎn)早，版本更不上。。。取巧的方法沒有了。

差別好幾個版本

5.絞盡腦汁 還是得操作原生dom，最終效果如下

圖片視頻可以預(yù)覽，上傳接下來上代碼

6.這個是完整的上傳圖片視頻的代碼內(nèi)容

更多的相關(guān)參數(shù)可以去element的官網(wǎng)查看

7.? ref vue基本用法，獲取當(dāng)前dom元素，對于想操作dom的同學(xué) 這個比較給力！

? ? ?on-success?文件上傳成功時(shí)的鉤子? 對應(yīng)的方法?function(response, file, fileList)

? ? ?on-preview??點(diǎn)擊文件列表中已上傳的文件時(shí)的鉤子?對應(yīng)的方法?function(file)

? ? ?on-remove??文件列表移除文件時(shí)的鉤子?對應(yīng)的方法?function(file, fileList)

? ? ?before-upload?上傳文件之前的鉤子，參數(shù)為上傳的文件??function(file)

? ? ?file-list 儲存的上傳文件列表 數(shù)組形式

? ? ?data 請求接口傳給后臺的參數(shù) 對象的形式

? ? ?list-type 有3種展示樣式?picture-card 為當(dāng)前展示的樣式

8.接下來就是一個完整的上傳步驟

上傳前的判斷（視頻要在移動端預(yù)覽，安卓的視頻兼容不好，我這邊寫死只能是mp4格式）

如果是圖片上傳的時(shí)候直接插入最后一個dom

預(yù)覽功能

刪除功能

9. 這就實(shí)現(xiàn)了上傳圖片視頻一起，雖然上傳過程很艱難，但是功能是可以實(shí)現(xiàn)的。

后記：視頻與圖片上傳成功后，我們關(guān)掉頁面后，在進(jìn)去頁面，是要重新渲染的。這時(shí)候 也要操作dom 獲取到當(dāng)前ref下的全部li列表 在通過遍歷 把是視頻的鏈接換成video標(biāo)簽

this.campusData.images? 為請求后來圖片視頻鏈接集合

10.這樣就OK了！