使用ivx實現拖拽上傳文件功能的經驗總結

在實際案例中常常會使用到上傳文件的功能，不過普通的上傳文件須要用戶再去一層一層查找文件的路徑並非十分的方便，今天給你們講一種使用拖拽放置容器實現上傳文件的方法。

1.拖拽放置容器
拖拽放置容器位於拓展組件中的特殊功能容器類，咱們能夠給它添加事件拖拽放置，此事件的動做中咱們能獲取一個返回值——拖拽文件，在調試記錄中打印出來能夠看到裏面包含文件的名稱、大小和類型等信息。



不過拖拽放置容器只是把文件拖拽進來，上傳到服務器仍是要使用文件接口組件。文件接口上傳文件動做的回調中會收到文件上傳到服務器後的一些信息參數。


2.添加數據庫字段
第一步咱們要作的是設計後臺的數據庫字段，咱們添加如下4個字段，name，type，size和url，分別用於存儲上傳文件的名稱，類型，大小和URL地址。

3.添加服務
下一步咱們添加一個對數據庫進行提交操做的服務。數據庫有四個字段，因此服務添加了對應的四個接收參數，另外還有一個返回參數用於給前臺返回數據庫提交操做的結果。前臺調用服務時返回結果是OK則提交成功，否者顯示失敗緣由。

4.拖拽上傳
在前臺咱們用一個對象數組存儲咱們上傳了哪些文件，對象數組與數據庫包含同樣的4列，name，type，size和url。拖拽放置容器內，咱們添加一些文本組件和圖片組件對用戶提示和展現上傳進度。

而後是拖拽容器的事件，咱們將文件拖拽放置到容器區域內時，調用文件接口組件上傳文件，路徑就是拖拽放置容器返回的參數「拖拽文件」，第一個回調uploaded，是文件已經上傳完畢，這時咱們給對象數組「上傳的文件列表」添加一行數據，而且調用服務把這行數據也寫入到數據庫中，最後在服務的回調裏查看數據庫提交的結果。

文件接口上傳文件的另外兩個回調，onError表示上傳出錯，這裏咱們提示用戶並把失敗緣由展現出來，uploading表示文件正在上傳中，咱們提示用戶文件正在上傳並展現上傳進度。

5.前臺文件列表
在前臺咱們還須要一個列表把上傳過的文件展現出來，使用for容器循環建立一個列表，數據來源就是以前添加的對象數組「上傳的文件列表」。

文件列表的每行中，文本組件綁定了當前數據的name，展現文件名稱，圓框關閉圖標添加了事件，用於從前臺的對象數組中刪除該行數據，下載圖標添加了事件能夠經過該行數據的url下載該文件（下載文件也須要使用文件接口組件）。



總結
須要注意的是拖拽放置容器只是將文件拖拽到了容器內部，具體上傳到服務器仍是要經過文件接口組件的，他只是提供了一種操做模式。另外在細節上，咱們能夠在拖拽進入事件下改變容器的背景顏色，而後拖拽離開時再將背景顏色重置爲初始狀態。這樣用戶將文件拖進容器區域內會有一個明顯的展現效果的變化，用戶體驗也會更好一些。