本文從文件上傳的三個(gè)階段：「上傳前」、「上傳時(shí)」、「上傳后」來(lái)說(shuō)明作者現(xiàn)在已知的所有文件上傳問(wèn)題，來(lái)看看~

好久沒(méi)有動(dòng)筆了，久到都快要忘記文字應(yīng)該怎么寫、開頭怎么寫。最近做完了一個(gè)內(nèi)部系統(tǒng)，趁下一個(gè)還在路上，總結(jié)一下在這個(gè)系統(tǒng)里遇到的「文件上傳」問(wèn)題。當(dāng)我在準(zhǔn)備這篇文章的素材的時(shí)候，發(fā)現(xiàn)自己在做「文件上傳」時(shí)仍有部分細(xì)節(jié)沒(méi)有考慮到，產(chǎn)品之路還很長(zhǎng)，仍需不斷總結(jié)、不斷努力呀。

老規(guī)矩，為啥需要上傳文件呢？不上傳行不行得通？

涉及多方溝通的系統(tǒng)，肯定是需要文件往來(lái)，此時(shí)上傳文件就成了系統(tǒng)不可或缺的功能。不上傳肯定是不行的啊，任務(wù)流會(huì)斷開，大家都不舒服。

額，既然繞不開，那要怎么做呢？

我會(huì)從「文件上傳」的「上傳前」、「上傳時(shí)」、「上傳后」三個(gè)階段來(lái)說(shuō)明我現(xiàn)在已知的所有文件上傳問(wèn)題。

一、上傳前

需要明確什么文件可以上傳，可以進(jìn)入「上傳時(shí)」的流程，具體包括：

支持什么樣的文件格式？ 圖片？psd？pdf？word？excel？zip？rar？全部？

1. 支持什么樣的上傳方式？ 拖拽上傳？點(diǎn)擊上傳？復(fù)制粘貼上傳？
2. 支持多大的文件？ 業(yè)務(wù)有沒(méi)有要求？服務(wù)器有沒(méi)有限制？阿里云最大限制 20M。
3. 一次支持上傳多少文件？ 單個(gè)上傳？批量上傳？
4. 異常文件怎么處理？ 已經(jīng)上傳過(guò)的文件是否還能再次上傳？ 空文件是否可以上傳？ 一次性上傳多個(gè)同名文件怎么處理？

二、上傳中

嗯，「上傳前」里的系統(tǒng)野怪打完了，接下來(lái)，該處理「上傳中」的野怪了。

1. 上傳過(guò)程中是否要顯示上傳進(jìn)度？上傳進(jìn)度怎么處理？通過(guò)瀏覽器上傳文件是無(wú)法獲取文件上傳進(jìn)度的。
2. 上傳過(guò)程中是否要進(jìn)行數(shù)據(jù)校驗(yàn)？
3. 上傳過(guò)程中是否允許取消上傳？
4. 是否支持?jǐn)帱c(diǎn)續(xù)傳？
5. 上傳失敗時(shí)最大重試次數(shù)？一次上傳失敗就算失??？還是在用戶無(wú)感知的情況下上傳 3 次失敗才算失??？
6. 上傳的文件尤其是圖片是否需要壓縮？壓縮規(guī)則是什么？（什么時(shí)候需要壓縮？怎么壓縮？期望結(jié)果是什么？）是否需要存儲(chǔ)原圖？

三、上傳后

文件上傳成功了，那后續(xù)還要做哪些任務(wù)才能完美通過(guò)呢？

（1）文件什么時(shí)候上傳到服務(wù)器？選擇文件后自動(dòng)上傳？綁定其他事件觸發(fā)上傳？

• 上傳成功之后立即上傳。服務(wù)器里多余的圖片怎么處理？是否需要一個(gè)專門的清除多余圖片的方法，檢測(cè)文件是否在數(shù)據(jù)庫(kù)里有記錄，沒(méi)有就刪除，定時(shí)運(yùn)行該程序。
• 用戶點(diǎn)擊“確定”一起把數(shù)據(jù)提交到后臺(tái)？如果用戶此時(shí)刷新界面或者關(guān)閉界面，文件可能無(wú)法保留。

（2）上傳后的文件是否需要預(yù)覽？預(yù)覽的規(guī)則是什么？直接縮放？顯示中間部分？

（3）上傳后的文件是否需要下載？

（4）上傳后的文件是否支持刪除？

（5）上傳后的文件是否需要重命名？重命名的規(guī)則是什么？按照時(shí)間隨機(jī)數(shù)？不重命名可能出現(xiàn)什么問(wèn)題？

（6）如果允許多次上傳，那么采用追加還是覆蓋？

以上就是所有我能想到的文件上傳中的野怪，接下來(lái)說(shuō)一下自己遇到的坑吧。

坑1：psd文件變 png

關(guān)于 psd 文件在瀏覽器中的上傳：chrome 瀏覽器會(huì)把它當(dāng)作 image 文件上傳，剪切板粘貼會(huì)轉(zhuǎn)為 png 圖片上傳；safari 瀏覽器會(huì)把它當(dāng)作 file 文件上傳，剪切板不能粘貼該文件上傳。至于其它瀏覽器是怎么處理的，我們沒(méi)做兼容，如果你有興趣，可以研究之后告訴我。

坑2：文件名含空格導(dǎo)致沒(méi)法下載

坑3：文件名含特殊字符導(dǎo)致預(yù)覽出現(xiàn)問(wèn)題

坑2 和坑3 其實(shí)是一個(gè)問(wèn)題，都是因?yàn)闆](méi)有對(duì)用戶上傳的文件進(jìn)行重命名或特殊字符進(jìn)行過(guò)濾導(dǎo)致的。踩了坑之后，才去研究了一下，發(fā)現(xiàn)釘釘也沒(méi)有處理特殊字符的問(wèn)題，圖片縮略圖顯示有問(wèn)題，心里一陣竊喜。

不過(guò)，現(xiàn)在再去看的時(shí)候，發(fā)現(xiàn)釘釘已經(jīng)把這個(gè)問(wèn)題修復(fù)了，大家都是在讓自己的產(chǎn)品越來(lái)越好。

坑4：圖片拖拽的拖拽區(qū)域太小，導(dǎo)致用戶體驗(yàn)很差

支持拖拽這種上傳，一定要設(shè)置足夠大的拖拽區(qū)域，不然拖拽這個(gè)功能就很難用，還不如點(diǎn)擊上傳。上線之后，用戶也不太喜歡用，那么開發(fā)這個(gè)功能的意義也就不大。

所以說(shuō)，做產(chǎn)品還是要做得好一點(diǎn)，這樣晚上才睡得安心。

嗯，該分享的內(nèi)容分享完了，這次就到這里啦。我們，下次再見。

—— End ——

本文由 @Q_misky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載