編輯導(dǎo)語(yǔ)：上傳文件是用戶(hù)的常用操作，也是系統(tǒng)的必備功能之一，那么如何利用中繼器做出一個(gè)高保真的上傳列表？本篇文章里，作者就如何在Axure做出上傳文件的高保真效果進(jìn)行了總結(jié)，一起來(lái)看一下。

上傳列表可以說(shuō)是系統(tǒng)必備的頁(yè)面，我們可以將對(duì)應(yīng)的文件上傳到系統(tǒng)，上傳的狀態(tài)包括正在上傳、上傳成功、上傳失敗的狀態(tài)都可以在上傳列表中查看和處理。

所以本期教程主要介紹如何通過(guò)中繼器做一個(gè)高保真的上傳列表，讓我們可以在Axure的演示界面做出上傳本地文件的高保真效果。

一、制作完成后應(yīng)具備以下效果

1. 可以真實(shí)選擇電腦里的本地文件；
2. 選擇本地文件后，獲取已選中文件的名稱(chēng)信息；
3. 模擬正在上傳的等待效果；
4. 可以刪除已上傳的文件；
5. 上傳失敗后，點(diǎn)擊上傳失敗文字，可以重新上傳。

二、制作材料準(zhǔn)備

1. 中繼器內(nèi)材料

這個(gè)原型主要用中繼器制作，所以我們需要新建一個(gè)中繼器，中繼器內(nèi)材料包括：

• 文件圖片——文件圖標(biāo)；
• 藍(lán)色矩形——用于制作等待效果的橫條，圓角設(shè)置為最大值；
• 淺藍(lán)色矩形——用于loading效果的背景橫條，圓角設(shè)置為最大值；
• 文件名稱(chēng)——顯示文件名，用文本標(biāo)簽制作即可；
• 上傳狀態(tài)——默認(rèn)藍(lán)色文字，默認(rèn)內(nèi)容為正在上傳；
• 刪除按鈕——?jiǎng)h除當(dāng)前文件的圖標(biāo)按鈕；
• 背景矩形——白色矩形，外部陰影為淺藍(lán)色；
• 垂直線(xiàn)——用于分隔和美化原型。

如下所示擺放：

中繼器表格設(shè)置，表格內(nèi)共三列：

1. no——用于排序使用，按12345678順序填寫(xiě)即可；
2. text——對(duì)應(yīng)文本名稱(chēng)的文本；
3. state——上傳狀態(tài)包括上傳成功、上傳失敗和正在上傳。

2. 上傳按鈕組合

因?yàn)橐獙?shí)現(xiàn)本地上傳文件、記錄文件路徑、獲取文件名稱(chēng)、中繼器添加行的效果，所以上傳按鈕不僅僅是一個(gè)按鈕，它由以下4個(gè)部分組合。

1）藍(lán)色按鈕——命名為upload，至于頂層，在按鈕組里只看到該元件，樣式可以設(shè)置美觀。

2）輸入框——命名為file，這里我們需要利用Axure里面輸入框的系統(tǒng)元件輸入框，將輸入框的輸入類(lèi)型設(shè)置為文本，這樣鼠標(biāo)點(diǎn)擊輸入框的時(shí)候，就可以彈出文件的系統(tǒng)彈窗了。我們把這個(gè)輸入框縮小，用藍(lán)色按鈕遮擋。

3）文本標(biāo)簽——命名為text，用于記錄選擇文件的路徑，默認(rèn)隱藏，可直接用藍(lán)色按鈕遮擋。

4）文本標(biāo)簽——命名為click，用于上傳文件后觸發(fā)中繼器添加行事件。

三、交互設(shè)置

1. 中繼器載入時(shí)交互

添加排序——對(duì)中繼器按鈕no列的內(nèi)容按升序的方式排列。這樣做是為了后續(xù)添加新文件的時(shí)候，新文件可以排在首行的位置。

2. 中繼器每項(xiàng)加載時(shí)交互

設(shè)置文本——設(shè)置文件名稱(chēng)元件的文本值等于Item.text，即中繼器內(nèi)text列的值。

然后我們需要分三種狀態(tài)來(lái)設(shè)置，不同交互。

1）如果state列的值為正在上傳

設(shè)置文本——設(shè)置上傳狀態(tài)元件的文本值等于Item.text，即中繼器內(nèi)text列的值，這里我們用富文本的形式，這樣就可以選擇設(shè)置文本的顏色為藍(lán)色。

設(shè)置尺寸——設(shè)置藍(lán)色矩形（上傳橫條）的尺寸，高于它原來(lái)的高度，寬等于1。因?yàn)槭钦谏蟼?，所以將藍(lán)色橫條設(shè)置為最小準(zhǔn)備制作loading的效果。

設(shè)置尺寸——再次設(shè)置藍(lán)色矩形（loading橫條）的尺寸，高于它原來(lái)的高度，寬等于灰色矩形（背景橫條）的寬度，這里注意我們需要加一個(gè)動(dòng)畫(huà)時(shí)間案例中為2000ms，這樣就實(shí)現(xiàn)了上傳loading的效果。

等待——這里我們需要等待上面藍(lán)色矩形動(dòng)畫(huà)時(shí)間結(jié)束，一般等待比它的時(shí)間稍長(zhǎng)一點(diǎn)，案例中我們?cè)O(shè)置等待2500ms。

更新行——更新當(dāng)前行state列的文字，更新為上傳成功。

這樣就順利完成上傳loading的效果了。

2）如果state列的值為上傳成功

設(shè)置文本——設(shè)置上傳狀態(tài)元件的文本值等于Item.text，即中繼器內(nèi)text列的值，這里我們用富文本的形式，這樣就可以選擇設(shè)置文本的顏色為綠色。

設(shè)置尺寸——設(shè)置藍(lán)色矩形（loading橫條）的尺寸，高于它原來(lái)的高度，寬等于灰色矩形（背景橫條）的寬度，這里注意不需要加動(dòng)畫(huà)時(shí)間，因?yàn)閯?dòng)畫(huà)在正在上傳的時(shí)候已經(jīng)完成了，這里主要是默認(rèn)的列表需要這樣設(shè)置。

3）如果state列的值為上傳失敗

設(shè)置文本——設(shè)置上傳狀態(tài)元件的文本值等于Item.text，即中繼器內(nèi)text列的值，這里我們用富文本的形式，這樣就可以選擇設(shè)置文本的顏色為紅色。

3. 上傳狀態(tài)文字鼠標(biāo)單擊時(shí)

上傳狀態(tài)分為上傳成功、正在上傳和上傳失敗，前兩者不需要處理，如果上傳失敗，我們想實(shí)現(xiàn)點(diǎn)擊文字就重新上傳的效果。

更新行——更新當(dāng)前行，state列的值，更新為正在上傳。因?yàn)榍懊嫖覀冊(cè)谥欣^器每項(xiàng)加載時(shí)寫(xiě)了正在上傳的事件，所以更新行之后就會(huì)實(shí)現(xiàn)重新上傳的效果。

4. 關(guān)閉按鈕鼠標(biāo)點(diǎn)擊時(shí)

刪除行——?jiǎng)h除當(dāng)前行的文件。

5. upload按鈕鼠標(biāo)單擊時(shí)事件

這部分內(nèi)容涉及一些js的代碼，如果沒(méi)有相關(guān)基礎(chǔ)的話(huà)，可能理解起來(lái)會(huì)有一定的難度，下面我簡(jiǎn)單講解一下思路。

首先是鼠標(biāo)單擊這個(gè)按鈕的時(shí)候，我們click的代碼觸發(fā)file元件點(diǎn)擊，這樣相當(dāng)于我們?cè)邳c(diǎn)擊藍(lán)色上傳按鈕的時(shí)候，同時(shí)點(diǎn)擊了file的元件，這樣就可以彈出本地文件選擇的彈窗。

選擇本地文件后，我們要執(zhí)行兩端的代碼：

1. 將選擇的文件路徑名設(shè)置到text的元件里；
2. 再次用click的代碼，觸發(fā)原型里click文本標(biāo)簽點(diǎn)擊的事件。

后續(xù)我們會(huì)在click文本標(biāo)簽內(nèi)添加交互，將已選擇的文件名添加到中繼器內(nèi)。

6. click元件鼠標(biāo)單擊時(shí)事件

上面說(shuō)到選擇文件后會(huì)觸發(fā)該元件鼠標(biāo)單擊時(shí)，那在鼠標(biāo)單擊時(shí)我們要執(zhí)行一下交互。

1）標(biāo)記行——標(biāo)記所有行。

2）更新行——更新已標(biāo)記的行，即更新所有行，更新no列，將他們的值改為T(mén)argetItem.no+1。

這里的意思是將他們的no序號(hào)改成他們?cè)瓉?lái)的值+1，這樣原來(lái)是12345678的，就會(huì)變成23456789。這樣做的目的就是后續(xù)我們新增行的時(shí)候，可以將最新的一行的no設(shè)為1，因?yàn)榍懊嫖覀冊(cè)谥欣^器載入時(shí)設(shè)置了排序按照no的升序，所以新上傳的文件就能排在第一行的位置。

3）添加行——更新no列的值為1，state列的值為正在上傳，text列的值為L(zhǎng)VAR1.slice((LVAR1.lastIndexOf(‘\\’))+1。

這里需要展開(kāi)說(shuō)明一下，因?yàn)槲覀冞x擇文件以后，在text元件上獲取到的是文件的路徑，例如：C:\fakepath\微信截圖_20211014105011.png，所以我們還要對(duì)text元件進(jìn)行加工，LVAR1對(duì)應(yīng)的就是text元件。

通過(guò)觀察，我們可以發(fā)現(xiàn)，文件問(wèn)就是最后一個(gè)\符號(hào)后面的內(nèi)容，所以我們可以用lastIndexOf函數(shù)找到最后一個(gè)\符號(hào)所在的位置，然后用slice從該位置+1起到最后的文本，這樣就取出了文件名稱(chēng)。

這樣我們就完成了整個(gè)元件了，將它組合在一起，以后就可以直接復(fù)制或者從元件庫(kù)用拖出來(lái)使用了，是不是非常好用呢？

那以上就是高保真上傳列表的制作方法了，感興趣的同學(xué)們可以動(dòng)手試試，謝謝您的閱讀。

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

題圖來(lái)自 Unsplash，基于CC0協(xié)議