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 ไม่ว่าจะเป็น <head> ของหน้า HTML ของคุณหรือรวมอยู่ใน JS หากการเลือกของคุณเลือก
หรือคุณสามารถใช้ชุดมัดที่สร้างไว้ล่วงหน้าจาก CDN: Smart CDN ของ Transloadit ในกรณีนั้น Uppy จะแนบตัวเองเข้ากับ window.Uppy ทั่วโลกวัตถุ Uppy
ชุดข้อมูลประกอบด้วยปลั๊กอิน 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 - Universal UI พร้อมตัวอย่าง, แถบความคืบหน้า, ตัวแก้ไขข้อมูลเมตาและสิ่งดีๆทั้งหมด จำเป็นสำหรับปลั๊กอิน UI ส่วนใหญ่เช่นเว็บแคมและ InstagramProgress Bar - แถบความคืบหน้าน้อยที่สุดที่เติมเต็มตัวเองเมื่ออัปโหลดดำเนินการต่อไปStatus Bar - ความคืบหน้าโดยละเอียดเพิ่มเติม, ปุ่มหยุด/ประวัติย่อ/ยกเลิก, เปอร์เซ็นต์, ความเร็ว, ขนาดที่อัปโหลด/ทั้งหมด (รวมอยู่ในค่าเริ่มต้นด้วย Dashboard )Informer - ส่งการแจ้งเตือนเช่น "ยิ้ม" ก่อนที่จะถ่ายเซลฟี่หรือ "อัพโหลดล้มเหลว" เมื่อทุกอย่างหายไป (รวมอยู่ในค่าเริ่มต้นด้วย Dashboard )Drag & Drop - พื้นที่ลากและวางธรรมดาFile Input - แม้แต่ปุ่ม "เลือกไฟล์" ที่ชัดเจนขึ้นWebcam - สแน็ปและบันทึกเซลฟี่เหล่านั้น?Google Drive - นำเข้าไฟล์จาก Google DriveDropbox - นำเข้าไฟล์จาก DropboxBox - นำเข้าไฟล์จากกล่องInstagram - นำเข้ารูปภาพและวิดีโอจาก InstagramFacebook - นำเข้ารูปภาพและวิดีโอจาก FacebookOneDrive - นำเข้าไฟล์จาก Microsoft OneDriveImport From URL - นำเข้า URL โดยตรงจากทุกที่บนเว็บ ⓒ mark หมายความว่า @uppy/companion ซึ่งเป็นส่วนประกอบฝั่งเซิร์ฟเวอร์เป็นสิ่งจำเป็นสำหรับปลั๊กอินเพื่อทำงาน
Tus - การอัปโหลดที่กลับมาใหม่ได้ผ่านมาตรฐาน TUS แบบเปิดXHR Upload - อัปโหลดปกติสำหรับแบ็กเอนด์ใด ๆ ที่นั่น (เช่น Apache, Nginx)AWS S3 - อัปโหลดธรรมดาไปยัง AWS S3 หรือบริการที่เข้ากันได้AWS S3 Multipart อัพโหลด“ Multipart” สไตล์ S3 ไปยัง AWS หรือบริการที่เข้ากันได้Transloadit - รองรับการอัปโหลดไฟล์ที่มีประสิทธิภาพของ TransloadIt ของ TransloadItGolden Retriever - คืนค่าไฟล์หลังจากความผิดพลาดของเบราว์เซอร์เหมือนไม่มีอะไรเลยThumbnail Generator - สร้างตัวอย่างภาพ (รวมอยู่ในค่าเริ่มต้นด้วย Dashboard )Form - รวบรวมข้อมูลเมตาจาก <form> ก่อนการอัปโหลด uppy จากนั้นเลือกผนวกผลลัพธ์กลับไปยังแบบฟอร์มRedux - สำหรับความต้องการการเดินทางเวลาที่เกิดขึ้นใหม่ของคุณ เรามุ่งมั่นที่จะสนับสนุน Chrome, Firefox และ Safari เวอร์ชันล่าสุด
<input type="file"> ?การไม่มีจาวาสคริปต์ที่มีอยู่มากมายดังนั้นจึงเป็นคำถามที่ยุติธรรม! ดำเนินธุรกิจการอัปโหลดและเข้ารหัสเป็นเวลาสิบปีแม้ว่าเราจะพบว่าในกรณี
ไม่ใช่แอพทั้งหมดที่ต้องการคุณสมบัติทั้งหมดเหล่านี้ <input type="file"> ใช้ได้ในหลาย ๆ สถานการณ์ แต่สิ่งเหล่านี้เป็นบางสิ่งที่ลูกค้าของเราตี / ถามพอที่จะจุดประกายให้เราพัฒนา UPPY
ทีมงานของ Transloadit มีขนาดเล็กและเรามีความทะเยอทะยานที่ใช้ร่วมกันเพื่อหาเลี้ยงชีพจากโอเพ่นซอร์ส ด้วยการมอบโครงการเช่น tus.io และ uppy เราหวังว่าจะพัฒนาสถานะของศิลปะทำให้ชีวิตเล็ก ๆ น้อย ๆ ที่ดีขึ้นเล็กน้อยสำหรับทุกคนและในการทำเช่นนั้นได้รับรางวัลงานและจับตาดูบริการเชิงพาณิชย์ของเรา: แพลตฟอร์มการบริโภคเนื้อหาและการประมวลผล
ความคิดของเราคือถ้าฐานผู้ใช้โอเพนซอร์สเพียงเล็กน้อยของเราสามารถมองเห็นการอุทธรณ์ของเวอร์ชันที่โฮสต์ได้โดยตรงจากแหล่งที่มาซึ่งอาจเพียงพอที่จะรักษางานของเราไว้แล้ว จนถึงตอนนี้มันใช้งานได้! เราสามารถอุทิศเวลา 80% ของเราในการเปิดโอเพ่นซอร์สและยังไม่ได้ล้มละลาย : D
ใช่โปรดตรวจสอบข้อมูลเพิ่มเติมสำหรับเอกสาร
ใช่สิ่งที่คุณต้องการในแบ็กเอนด์จะทำงานกับปลั๊กอิน @uppy/xhr-upload เนื่องจากมันทำ POST หรือ PUT เท่านั้น นี่คือตัวอย่างแบ็กเอนด์ PHP
หากคุณต้องการกลับมาใช้งานได้กับปลั๊กอิน TUS ให้ใช้หนึ่งในการใช้งานเซิร์ฟเวอร์ TUS หรือไม่?
และคุณจะต้องใช้ @uppy/companion หากคุณต้องการให้ผู้ใช้ของคุณสามารถเลือกไฟล์จาก Instagram, Google Drive, Dropbox หรือผ่าน URL โดยตรง (พร้อมบริการเพิ่มเติม)
.github/CONTRIBUTING.mdCHANGELOG.md UPPY ถูกใช้โดย: Photobox, Issuu, Law Insider, Cool Tabs, Soundoff, Scrumi, Crive และอื่น ๆ
ใช้ uppy ในโครงการของคุณ? แจ้งให้เราทราบ!
ใบอนุญาต MIT
