目錄

1、文件上傳的數(shù)據(jù)鏈路
2、文件上傳的前、中、后

文件上傳的數(shù)據(jù)鏈路

在網(wǎng)頁(yè)端，前端不能直接操作本地文件，必須要用戶來(lái)觸發(fā)。一般有以下3種觸發(fā)方式：
1、通過(guò)文件選擇按鈕選擇本地文件

2、通過(guò)拖拽的方式把文件拖進(jìn)來(lái)

3、在編輯框里復(fù)制粘貼

其中第一種是最常用的方式。

文件上傳按數(shù)據(jù)的存儲(chǔ)方式主要分為2種：

一、第三方文件存儲(chǔ)

指的是把文件存儲(chǔ)到第三方存儲(chǔ)服務(wù)。

舉個(gè)例子，假設(shè)需要上傳一張圖片并存儲(chǔ)起來(lái)。一般的做法是前端選擇完圖片后，圖片被傳輸?shù)椒?wù)端，

然后服務(wù)端調(diào)用上傳接口把圖片上傳到第三方存儲(chǔ)（這里的第三方存儲(chǔ)可以是騰訊云、阿里云這些提供商提供的文件存儲(chǔ)服務(wù)），

第三方服務(wù)再返回一個(gè)圖片的訪問(wèn)地址給到后臺(tái)，后臺(tái)最后把圖片地址存儲(chǔ)到自己的數(shù)據(jù)庫(kù)中。

整個(gè)鏈路：前端選擇文件 -> 傳輸文件到后臺(tái) -> 后臺(tái)傳輸文件到第三方 -> 第三方返回文件地址 -> 后臺(tái)把文件地址存儲(chǔ)到數(shù)據(jù)庫(kù)

文件傳輸過(guò)程中，可能會(huì)因?yàn)榫W(wǎng)絡(luò)、第三方服務(wù)不穩(wěn)定、后臺(tái)服務(wù)bug等導(dǎo)致上傳文件失敗。

因?yàn)殒溌繁容^長(zhǎng)，所以是哪個(gè)節(jié)點(diǎn)出錯(cuò)導(dǎo)致的文件上傳失敗，最好定下具體的失敗提示語(yǔ)。

比如如果是第三方服務(wù)的問(wèn)題，可以提示“上傳文件到第三方存儲(chǔ)失敗”，如果文件上傳到第三方成功了，但是因?yàn)樽陨矸?wù)問(wèn)題導(dǎo)致文件地址存儲(chǔ)數(shù)據(jù)庫(kù)失敗，可以提示“文件地址存儲(chǔ)數(shù)據(jù)庫(kù)失敗”等等。

二、數(shù)據(jù)庫(kù)存儲(chǔ)

指的是把文件內(nèi)容讀取出來(lái)，存儲(chǔ)到數(shù)據(jù)庫(kù)。

最常見(jiàn)的場(chǎng)景就是，上傳一個(gè)excel文件，根據(jù)excel內(nèi)容，把數(shù)據(jù)批量存儲(chǔ)到數(shù)據(jù)庫(kù)。

數(shù)據(jù)鏈路是：前端選擇文件 -> 傳輸文件到后臺(tái) -> 后臺(tái)解析excel數(shù)據(jù) -> 存儲(chǔ)數(shù)據(jù)到數(shù)據(jù)庫(kù)

最常出現(xiàn)問(wèn)題的節(jié)點(diǎn)是解析excel數(shù)據(jù)，這里最好給出數(shù)據(jù)合法性校驗(yàn)的具體規(guī)則和錯(cuò)誤提示語(yǔ)，比如單個(gè)文件的最大行數(shù)、某個(gè)字段的唯一性、是否必填、值合法性（比如只能是限定的幾個(gè)選擇詞）

文件上傳的前中后

一、文件上傳前

1、前端合法性校驗(yàn)
前端選擇本地文件后，文件會(huì)暫時(shí)緩存在前端，前端可以獲取到文件名、文件大小、文件內(nèi)容。前端是可以去解析文件內(nèi)容來(lái)做合法性校驗(yàn)，但是一般不建議放在前端做，解析文件性能比不上后臺(tái)（但也具體問(wèn)題具體分析）。

前端最常做的合法性校驗(yàn)是文件擴(kuò)展名、文件大小、文件個(gè)數(shù)、空文件等校驗(yàn)。

2、文件是否自動(dòng)上傳
在前端選擇完本地文件后，可以自動(dòng)觸發(fā)上傳到服務(wù)器，也可以手動(dòng)觸發(fā)。一般來(lái)說(shuō)，多文件的上傳采用手動(dòng)上傳，單文件的上傳采用自動(dòng)上傳。因?yàn)檫x擇多個(gè)文件后，可能會(huì)對(duì)之前選擇的文件進(jìn)行刪除操作。

3、文件個(gè)數(shù)限制
如果是支持多個(gè)文件上傳，最好做下文件個(gè)數(shù)限制，還有已經(jīng)選擇上傳的文件，最好支持手動(dòng)刪除。

4、選擇文件后是否展示文件名
選擇完文件后，最好要展示文件名，這樣可以給用戶一個(gè)文件上傳成功的暗示。如果是圖片的話，最好給個(gè)圖片預(yù)覽。

二、文件上傳中

1、文件上傳進(jìn)度
文件上傳是可以展示上傳進(jìn)度的，ajax有提供上傳進(jìn)度的事件監(jiān)聽(tīng)。

2、分片上傳
文件上傳可分為整個(gè)文件上傳和分片上傳，分片上傳一般用于大文件的上傳，比如一個(gè)30M的文件，可拆分為6份，每次上傳5M，等全部上傳到服務(wù)器后，服務(wù)器再把這些片段文件組合成完整的文件。

如果一次性上傳一個(gè)大文件，會(huì)導(dǎo)致整個(gè)過(guò)程比較漫長(zhǎng)，中途可能會(huì)因?yàn)槌瑫r(shí)失敗，且失敗后需要重頭開(kāi)始上傳。

分片上傳的優(yōu)點(diǎn)是，一旦上傳失敗只是損失一個(gè)分片而已，不用整個(gè)文件重傳，這也是我們常聽(tīng)到的 “斷點(diǎn)續(xù)傳”。

分片上傳相比整文件上傳邏輯要復(fù)雜一些，前端和服務(wù)端都要實(shí)現(xiàn)相應(yīng)的功能。

3、取消、暫停、恢復(fù)文件上傳

取消、暫停、恢復(fù)文件上傳功能一般用于大文件的分片上傳。

對(duì)于整個(gè)文件的上傳，就沒(méi)必要這些功能了，反而增加了復(fù)雜度。

三、文件上傳后

1、文件內(nèi)容校驗(yàn)失敗
如果文件內(nèi)容檢驗(yàn)失敗，最好后臺(tái)返回每一行哪個(gè)字段有什么錯(cuò)誤給到前端， 這樣用戶就可以按照提示修改文件了。

2、文件上傳成功
文件上傳成功后一般是跳轉(zhuǎn)到一個(gè)預(yù)覽列表頁(yè)，這樣用戶就可以即時(shí)看到之前上傳的數(shù)據(jù)。

3、異步上傳

文件上傳后，如果后臺(tái)需要根據(jù)文件內(nèi)容做大量的計(jì)算，比較耗費(fèi)時(shí)間，可采用異步上傳的方式。即文件上傳成功后，服務(wù)端立即返回上傳成功的結(jié)果給到前端，但是文件解析的結(jié)果稍后通過(guò)站內(nèi)信的方式通知用戶解析結(jié)果。

---- 推薦閱讀 ----

產(chǎn)品經(jīng)理從0開(kāi)始學(xué)SQL(六)-修改數(shù)據(jù)
爬蟲(chóng)的基本原理及應(yīng)用場(chǎng)景
什么樣的產(chǎn)品適合設(shè)計(jì)成一款瀏覽器插件
如何做一次完美的 ABTest？

?? 愛(ài)心三連擊

1、看到這里了就點(diǎn)個(gè)在看支持下吧，你的點(diǎn)贊/在看/分享是我持續(xù)創(chuàng)作的動(dòng)力。

2、關(guān)注公眾號(hào)【產(chǎn)品的技術(shù)小課】，回復(fù)【加群】加入產(chǎn)品技術(shù)交流群

3、也可添加我微信【yss627144】，一起成長(zhǎng)。