一個(gè)不認(rèn)識(shí)中草藥的中醫(yī)不可能是好醫(yī)生，一個(gè)不認(rèn)識(shí)B端組件的產(chǎn)品經(jīng)理也做不出好產(chǎn)品。這篇文章，我們來了解下B端產(chǎn)品中的基礎(chǔ)組件：上傳組件。

中醫(yī)的入門知識(shí)是什么?肯定是認(rèn)識(shí)各種中草藥，了解他們的特性、功效和使用方法。中藥店柜臺(tái)后面一個(gè)個(gè)的木格子，就是中醫(yī)的入行門檻。

B端產(chǎn)品的入門知識(shí)是什么？肯定是認(rèn)識(shí)各種組件，了解他們的規(guī)范、作用和使用規(guī)則。構(gòu)成頁面的一個(gè)個(gè)組件，就是B端產(chǎn)品的入行門檻。

這個(gè)《好玩》系列為大家匯總了多種常用的B端組件，認(rèn)識(shí)它們、熟悉它們、用好它們，為產(chǎn)品晉級(jí)之路打下扎實(shí)的基本功。

今天再聊一下：上傳組件。可以配合之前發(fā)一篇介紹上傳組件的文章一起觀看，讓你全方位了解上傳組件。

一、組件簡(jiǎn)介

當(dāng)用戶需要把本地?cái)?shù)據(jù)發(fā)布到遠(yuǎn)程服務(wù)器時(shí)，就需要用到上傳組件，比如上傳頭像，上傳視頻、提交資料等。它是B端產(chǎn)品中比較常見的組件。

一款产品无到有，产品经理需要做些什么？

在一个产品从无到有的过程中，要做好产品经理这个角色实在是不容易，除了大家都知道的写需求、写需求、写需求，要做的事多着呢。产品经理不是你眼中的只会找你麻烦，提要求..

查看详情 >

二、組件構(gòu)成

一個(gè)完整的上傳組件由以下5部分組成：

1. 上傳觸發(fā)器（必要）：觸發(fā)上傳動(dòng)作，點(diǎn)擊后打開本地文件夾，用戶可以選擇需要上傳的文件或文件夾。
2. 上傳內(nèi)容（必要）：用來顯示已選擇或已上傳的文件或文件夾，可以顯示文本列表、圖片列表、圖片墻、縮略圖等。
3. 上傳狀態(tài)（必要）：顯示本地?cái)?shù)據(jù)發(fā)布到遠(yuǎn)程服務(wù)器的進(jìn)度。一般用進(jìn)度條、百分比來展示。
4. 刪除按鈕（可選）：用來刪除已選擇或已上傳的文件或文件夾。
5. 提示文本（可選）：用來提示說明上傳規(guī)則，比如上傳內(nèi)容、文件格式、文件大小、數(shù)量等信息。

三、組件類型

不同的分類維度，組件可以分為不同類型。

以下是三種分類維度：

1.根據(jù)上傳文件的數(shù)量，上傳組件可分為兩種：

1）單文件上傳：一次只能上傳一個(gè)文件。

2）多文件上傳：一次可以上傳多個(gè)文件。

2.根據(jù)交互方式的不同，上傳組件可分為兩種：

1）點(diǎn)擊上傳：鼠標(biāo)點(diǎn)擊觸發(fā)上傳動(dòng)作。

2）拖拽上傳：拖拽文件到指定區(qū)域觸發(fā)上傳動(dòng)作（文章評(píng)論區(qū)可獲取Axure交互源文件）。

3.根據(jù)選擇文件與上傳文件先后順序的不同，上傳組件可分為兩種：

1）選擇后立即上傳：選擇動(dòng)作與上傳動(dòng)作合二為一，選擇后立即上傳。

2）批量上傳：先選擇文件，確認(rèn)后再統(tǒng)一上傳。

四、組件狀態(tài)

1.組件中的上傳觸發(fā)器分為四個(gè)狀態(tài)：

1. 初始態(tài)：組件首次加載時(shí)的狀態(tài)。
2. 懸停態(tài)：鼠標(biāo)停留在上傳按鈕時(shí)的狀態(tài)。
3. 點(diǎn)擊態(tài)：鼠標(biāo)點(diǎn)擊時(shí)的狀態(tài)。
4. 禁用態(tài)：觸發(fā)器禁用時(shí)的狀態(tài)。

2.根據(jù)文件的上傳過程，組件可分為五個(gè)狀態(tài)：

1. 上傳前：還未選擇本地文件時(shí)的狀態(tài)。
2. 待上傳：文件選擇完成，還未點(diǎn)擊上傳時(shí)的狀態(tài)。這種狀態(tài)一般出現(xiàn)在批量上傳組件中，非批量上傳組件一般沒有待上傳的狀態(tài)。
3. 上傳中：本地?cái)?shù)據(jù)發(fā)布到遠(yuǎn)程服務(wù)器的過程，一般會(huì)用進(jìn)度條組件或百分比文案來展示具體進(jìn)度。
4. 上傳成功：本地?cái)?shù)據(jù)成功發(fā)布到遠(yuǎn)程服務(wù)器后的狀態(tài)。
5. 上傳失敗：發(fā)布到遠(yuǎn)程服務(wù)器失敗后的狀態(tài)。

五、功能擴(kuò)展

在實(shí)際應(yīng)用場(chǎng)景中，上傳組件會(huì)搭配一些附加功能。比如上傳前校驗(yàn)、移除前校驗(yàn)、圖片裁切、限制文件數(shù)量等。

1）上傳前校驗(yàn)：可以防止用戶誤操作。

2）移除前校驗(yàn)：可以防止用戶誤刪。

3）圖片上傳前裁切

4）限制上傳文件的數(shù)量

六、使用規(guī)則與注意事項(xiàng)

上傳組件是把本地?cái)?shù)據(jù)發(fā)布到遠(yuǎn)程服務(wù)器的時(shí)候使用的，使用過程中需要注意以下幾點(diǎn)：

1. 限制單個(gè)文件的大小，防止太大的文件遠(yuǎn)程發(fā)布時(shí)出現(xiàn)中斷問題，同時(shí)也可以減少服務(wù)器負(fù)擔(dān)。
2. 發(fā)布超過一定大小（比如500Mb）的文件時(shí)，需要有斷點(diǎn)續(xù)傳功能，減少用戶的糾錯(cuò)成本。
3. 組件支持的文件類型和文件大小需要有清晰的提示，防止用戶錯(cuò)誤操作。
4. 上傳組件的觸發(fā)器、進(jìn)度條、上傳內(nèi)容展示等有豐富的樣式變化，使用時(shí)需要根據(jù)具體的需求場(chǎng)景謹(jǐn)慎斟酌使用哪種樣式。

七、相似組件

八、小結(jié)

認(rèn)識(shí)每個(gè)組件、熟悉每個(gè)組件、用好每個(gè)組件，對(duì)待它們像兒時(shí)對(duì)待心愛的玩具一樣，如數(shù)家珍、了如指掌。它們會(huì)給你源源不斷的勇氣和底氣，讓你在產(chǎn)品晉級(jí)之路上閃閃發(fā)光。