uppy
Uppy 4.9.0
Uppy는 모든 응용 프로그램과 완벽하게 통합되는 매끄럽고 모듈 식 자바 스크립트 파일 업 로더입니다. 빠르고 이해할 수있는 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에 포함하십시오.
또는 TransLoadit의 CDN : Smart CDN에서 사전 구축 된 번들을 사용할 수도 있습니다. 이 경우 Uppy 는 Global window.Uppy Object에 첨부됩니다.
켈 이 번들은 대부분의 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 플러그인에 필요합니다Progress Bar - 업로드가 진행될 때 스스로를 채우는 최소한의 진행률 표시 줄Status Bar -보다 자세한 진행 상황, 일시 정지/이력서/취소 버튼, 백분율, 속도, 업로드/총 크기 ( Dashboard 에 기본적으로 포함)Informer - 셀카를 찍기 전에 "Smile"과 같은 알림을 보내거나 모두 손실되면 "업로드 실패"( 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 스타일의 "멀티 파트"업로드 AWS 또는 호환 서비스에 업로드Transloadit - 트랜스 로트의 강력한 파일 업로드 및 인코딩 백엔드 지원Golden Retriever - 브라우저 충돌 후 파일을 복원합니다.Thumbnail Generator - 이미지 미리보기 생성 ( Dashboard 에 기본적으로 포함)Form - Uppy 업로드 직전에 <form> 에서 메타 데이터를 수집 한 다음 선택적으로 결과를 양식으로 추가합니다.Redux - 신흥 시간 여행 필요에 따라 우리는 최근 버전의 Chrome, Firefox 및 Safari를 지원하는 것을 목표로합니다.
<input type="file"> 사용하지 않는 이유는 무엇입니까?JavaScript 비트가 많지 않은 것이 많기 때문에 공정한 질문입니다! 10 년 동안 업로드 및 인코딩 비즈니스를 실행하지만 파일 입력은 일부가 원하는 것으로 나타났습니다.
모든 앱에 이러한 모든 기능이 필요한 것은 아닙니다. <input type="file"> 많은 상황에서 괜찮습니다. 그러나 이것들은 우리 고객이 우리를 불쾌하게 발전시키기 위해 충분히 촉구 한 것에 대해 부딪히거나 요청한 몇 가지였습니다.
Transloadit의 팀은 작고 우리는 오픈 소스에서 생계를 유지하려는 야심을 가지고 있습니다. Tus.io 및 Uppy와 같은 프로젝트를 제공함으로써 우리는 최첨단을 발전시키고, 모든 사람들에게 인생을 조금 더 나은 삶으로 만들기를 희망하며, 그렇게함으로써 보람있는 직업을 갖고 상업적 서비스, 즉 콘텐츠 섭취 및 처리 플랫폼에 시선을 사로 잡습니다.
우리의 생각은 오픈 소스 사용자 기반의 일부만이 소스에서 바로 호스팅 된 버전의 매력을 볼 수 있다면 이미 우리의 작업을 유지하기에 충분할 수 있다는 것입니다. 지금까지 이것은 작동 중입니다! 우리는 오픈 소스에 시간의 80%를 전념 할 수 있으며 아직 파산하지 않았습니다. :디
예, 자세한 내용은 문서를 확인하십시오.
예, 백엔드에서 원하는대로 @uppy/xhr-upload 플러그인과 함께 작동합니다. POST 되거나 PUT 요청 만 수행합니다. PHP 백엔드 예는 다음과 같습니다.
TUS 플러그인을 사용하여 재개를 원한다면 TUS 서버 구현 중 하나를 사용하십시오.
또한 사용자가 Instagram, Google Drive, Dropbox 또는 Direct URL을 통해 파일을 선택할 수 있으려면 @uppy/companion 필요합니다 (더 많은 서비스가 제공됨).
.github/CONTRIBUTING.md 의 기고자 안내서CHANGELOG.md Uppy는 Photobox, Issuu, Law Insider, Cool Tabs, Soundoff, Scrumi, Crive 등에 의해 사용됩니다.
프로젝트에서 Uppy를 사용 하시겠습니까? 알려주세요!
MIT 라이센스.
