中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

一、組件簡介

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

二、組件構成

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

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

三、組件類型

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

以下是三種分類維度：

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

1）單文件上傳：一次只能上傳一個文件。

2）多文件上傳：一次可以上傳多個文件。

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

1）點擊上傳：鼠標點擊觸發(fā)上傳動作。

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

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

1）選擇后立即上傳：選擇動作與上傳動作合二為一，選擇后立即上傳。

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

四、組件狀態(tài)

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

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

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

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

五、功能擴展

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

1）上傳前校驗：可以防止用戶誤操作。

2）移除前校驗：可以防止用戶誤刪。

3）圖片上傳前裁切

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

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

上傳組件是把本地數(shù)據(jù)發(fā)布到遠程服務器的時候使用的，使用過程中需要注意以下幾點：

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

七、相似組件

八、小結

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