uppy
Uppy 4.9.0
Uppy是一個光滑的模塊化JavaScript文件上傳器，可與任何應用程序無縫集成。它很快，具有可理解的API，讓您擔心比構建文件上傳器更重要的問題。
上述示例中使用的代碼：
import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import RemoteSources from '@uppy/remote-sources'
import ImageEditor from '@uppy/image-editor'
import Webcam from '@uppy/webcam'
import Tus from '@uppy/tus'
const uppy = new Uppy ( )
. use ( Dashboard , { trigger : '#select-files' } )
. use ( RemoteSources , { companionUrl : 'https://companion.uppy.io' } )
. use ( Webcam )
. use ( ImageEditor )
. use ( Tus , { endpoint : 'https://tusd.tusdemo.net/files/' } )
. on ( 'complete' , ( result ) => {
console . log ( 'Upload result:' , result )
} )在線嘗試或閱讀文檔以獲取有關如何使用Uppy及其插件的更多詳細信息。
npm install @uppy/core @uppy/dashboard @uppy/tus將CSS uppy.min.css添加到您的HTML頁面的<head>中，或者在JS中包含在JS中，如果您選擇的Bundler支持它。
另外，您還可以使用Transloadit的CDN：SMART CDN的預構建捆綁包。在這種情況下， Uppy將將自己連接到global window.Uppy 。
配x 該捆綁包由大多數Uppy插件組成，因此不建議使用此方法進行生產，因為您的用戶可能只使用幾個插件就必須下載所有插件。
<!-- 1. Add CSS to `<head>` -->
< link
href =" https://releases.transloadit.com/uppy/v4.9.0/uppy.min.css "
rel =" stylesheet "
/>
<!-- 2. Initialize -->
< div id =" files-drag-drop " > </ div >
< script type =" module " >
import {
Uppy ,
Dashboard ,
Tus ,
} from 'https://releases.transloadit.com/uppy/v4.9.0/uppy.min.mjs'
const uppy = new Uppy ( )
uppy . use ( Dashboard , { target : '#files-drag-drop' } )
uppy . use ( Tus , { endpoint : 'https://tusd.tusdemo.net/files/' } )
</ script > Dashboard - 通用UI，帶預覽，進度條，元數據編輯器以及所有酷的東西。大多數UI插件（例如網絡攝像頭和Instagram）所需Progress Bar - 上傳進展時填補自身的最小進度欄Status Bar - 更詳細的進度，暫停/簡歷/取消按鈕，百分比，速度，上傳/總尺寸（默認包含在Dashboard ）Informer - 在丟失時，請在拍照或“上傳失敗”之前發送諸如“微笑”之類的通知（默認包含在Dashboard ）Drag & Drop - 純拖放區域File Input - 甚至更普通的“選擇文件”按鈕Webcam - 快照並記錄這些自拍照？Google Drive - 從Google驅動器中導入文件Dropbox - 從Dropbox導入文件Box - 從框導入文件Instagram - Instagram的導入圖像和視頻Facebook - 來自Facebook的圖像和視頻OneDrive - 從Microsoft OneDrive導入文件Import From URL - 從網絡上的任何地方導入直接URL ⓒ標記意味著@uppy/companion是一個服務器端組件，插件工作需要工作。
Tus - 可通過開放式TUS標準重新上傳XHR Upload - 任何後端的常規上傳（例如Apache，nginx）AWS S3 - 純上傳到AWS S3或兼容服務AWS S3 Multipart - S3風格的“ Multipart”上傳到AWS或兼容服務Transloadit支持TransLoadit強大的文件上傳和編碼後端Golden Retriever - 瀏覽器崩潰後還原文件，就像什麼都沒有Thumbnail Generator - 生成圖像預覽（默認包含Dashboard ）Form - 在上傳之前從<form>收集元數據，然後選擇將結果附加回表單Redux滿足您新興的旅行需求我們旨在支持Chrome，Firefox和Safari的最新版本。
<input type="file"> ？沒有JavaScript擊敗很多，所以這是一個公平的問題！運行上傳和編碼業務十年，儘管我們發現在情況下，文件輸入還需要一些：
並非所有應用都需要所有這些功能。在許多情況下，一個<input type="file">很好。但是，這些是我們的客戶擊中 /詢問的幾件事，足以激發我們發展。
Transloadit的團隊很小，我們有一個共同的野心來謀生開源。通過贈送諸如Tus.io和Uppy之類的項目，我們希望能夠推進最新技術的狀態，使生活對每個人的生活變得更好，並在此工作中獲得有益的工作，並註重我們的商業服務：內容攝入和處理平台。
我們的想法是，如果我們的開源用戶群中只有一小部分可以直接從源頭上看到託管版本的吸引力，那就已經足以維持我們的工作了。到目前為止，這正在解決！我們能夠將80％的時間用於開源，並且還沒有破產。 ：d
是的，請查看文檔以獲取更多信息。
是的，無論您在後端上想要什麼，都可以使用@uppy/xhr-upload插件，因為它僅POST或PUT請求。這是PHP後端示例。
如果您想要使用TUS插件的重複性，請使用TUS服務器實現之一？
而且，如果您希望用戶能夠從Instagram，Google Drive，Dropbox或Direct URL（將提供更多服務）從Instagram，Google Drive，Dropbox或其他服務中選擇文件，則需要@uppy/companion
.github/CONTRIBUTING.md的撰稿人指南CHANGELOG.md Uppy使用：Photobox，Issuu，Law Insider，Cool Tabs，Soundoff，Sundoff，Scrumi，Crive等。
在您的項目中使用Uppy？讓我們知道！
麻省理工學院許可證。
