最近在做一個(gè)圖片列表的需求罢缸，要求選擇圖片之后，自動(dòng)上傳到阿里云服務(wù)器投队，然后動(dòng)態(tài)展示枫疆。由于圖片列表要求有預(yù)覽，編輯敷鸦，刪除养铸，替換，重命名轧膘，以及拖拽換位的需求钞螟，所以說，僅僅是上傳組件的圖片預(yù)覽功能是滿足不了現(xiàn)有需求的谎碍，因此鳞滨，在上傳結(jié)束后，拿到返回的數(shù)組之后蟆淀，要同步去更新dom拯啦，將新返回的數(shù)組渲染出來。
但是熔任，在測(cè)試過程中發(fā)現(xiàn)褒链，當(dāng)同時(shí)選擇多張圖片進(jìn)行上傳的時(shí)候，會(huì)出現(xiàn)一部分圖片莫名其妙丟失的情況疑苔。由于圖片的綁定是在change方法里面監(jiān)測(cè)到成功的狀態(tài)之后進(jìn)行綁定甫匹，所以可以肯定的是，這部分丟失的圖片并沒有走失敗的方法惦费，因?yàn)楸O(jiān)測(cè)到上傳失敗之后會(huì)有相應(yīng)的提示兵迅，但是瀏覽器種并沒有出現(xiàn)相應(yīng)的提示。
打開控制臺(tái)之后測(cè)試發(fā)現(xiàn)薪贫，有一部分請(qǐng)求是被瀏覽器cenceled掉了恍箭，而change方法里面是監(jiān)聽不到瀏覽器取消的操作的，所以說瞧省，這部分圖片的丟失扯夭，是不容易被用戶察覺到的鳍贾。意識(shí)到問題的嚴(yán)重性，就要著手開始解決交洗。
探索發(fā)現(xiàn)贾漏，由于更新dom會(huì)觸發(fā)vue的render操作，而render的同時(shí)藕筋，瀏覽器會(huì)取消掉同時(shí)進(jìn)行的上傳操作纵散，這就是問題的所在。既然更新dom會(huì)取消上傳操作隐圾，那么等所有上傳操作都完成之后伍掀，再去更新dom是不是問題就解決了呢？
但是暇藏，ant-design上傳只有一個(gè)change的鉤子可以監(jiān)聽文件的上傳狀態(tài)蜜笤，并沒有文件上傳完成的鉤子可以使用。而change方法是每進(jìn)行一次上傳操作都會(huì)觸發(fā)change函數(shù)盐碱，換言之把兔，當(dāng)你同時(shí)選擇了10張圖片就行上傳的時(shí)候，change方法就會(huì)觸發(fā)10次。那么捕捉到最后一次上傳動(dòng)作，是不是就可以解決問題呢捡絮？但是如何才能捕捉到最后一次上傳動(dòng)作呢。
我們都知道缕贡，原生的文件上傳都會(huì)有一個(gè)fileLIst數(shù)組供我們進(jìn)行本地的渲染。查閱文檔發(fā)現(xiàn)拣播，ant-design也提供一個(gè)fileList數(shù)組可供操作晾咪。而change函數(shù)里面也能捕捉到這個(gè)fileList數(shù)組。既然能拿到fileList數(shù)組贮配，那么問題就變得相對(duì)容易多了谍倦。
這時(shí)候，我們就需要獲取到fileList的長(zhǎng)度泪勒，然后我們可以在本地去維護(hù)一個(gè)變量昼蛀，在每張圖片上傳成功的時(shí)候，對(duì)這個(gè)變量進(jìn)行++酣藻，當(dāng)這個(gè)變量的數(shù)值和fileList的長(zhǎng)度相同的時(shí)候曹洽，也就意味著上傳進(jìn)行到了最后一張鳍置。這時(shí)候辽剧，我們就可以在上傳完成之后，對(duì)dom進(jìn)行渲染税产，在渲染完成的同時(shí)怕轿，將本地維護(hù)的這個(gè)變量初始化偷崩。這樣問題就得到了很好的解決。
