簡介
FilePond 是一個(gè)比較成熟的 JavaScript 上傳庫，可帶來如絲般順滑的拖放文件上傳功能。
除了原生 js 以外，也支持各種常見框架。這里我主要記錄 Vue 中使用的場(chǎng)景。
為了學(xué)習(xí)這個(gè)庫的使用方法，我?guī)缀醴g了整篇文檔以助于理解。
但是由于表格及代碼內(nèi)容過多，篇幅過長。這里不一一呈現(xiàn)，只取最精簡內(nèi)容。詳細(xì)可以前往 [企鵝反應(yīng)堆]了解一下 js 上傳庫——filepond 閱讀全文。
安裝
npm install vue-filepond filepond --save
最小實(shí)例
關(guān)于服務(wù)端的配置
詳見文檔：Easy File Uploading With JavaScript | FilePond (pqina.nl)，這里進(jìn)行一些簡單總結(jié)。
在 filepond 中，與服務(wù)器的交互分為以下 7 個(gè)行為：
- 上傳 process
- 分片上傳 process chunks
- 撤銷 revert （上傳過程中，點(diǎn)擊撤銷）
- 恢復(fù) restore （回顯方法之一，用于恢復(fù)“臨時(shí)文件”，file type 為 limbo 時(shí)調(diào)用）
- 回顯 load （回顯方法之二，用于恢復(fù)“已上傳文件”，file type 為 local 時(shí)調(diào)用）
- 獲取 fetch （通過 URL 或 HTML 字符串，GET）
- 刪除 remove （默認(rèn)不啟用，只能設(shè)置為自定義方法）
單 URL 配置：
對(duì)象配置：
函數(shù)配置：
暫無評(píng)論，快來評(píng)論吧!