上传功能很常见，自己写过于麻烦，直接使用大佬封装好的开源组件是个不错的选择。反正我喜欢用，因为快速，因为懒。今天给大家分享一个轻量级JavaScript 文件上传组件，一键使用，支持自定义。
GitHub地址：https://github.com/transloadit/uppy
官网地址：https://uppy.io/
特征
- 轻量级、模块化、基于插件的架构，依赖性低
- 通过开放的tus标准进行可续传文件上传，因此大型上传不会受到网络故障的影响
- 支持从以下位置选取文件：网络摄像头、Dropbox、Box、Google Drive、Instagram，尽可能绕过用户设备，直接通过@uppy/companion在服务器之间同步
- 与文件编码和处理后端（如 Transloadit ）配合使用效果很好，无需任何后端也能很好地工作（您只需要滚动您自己的 Apache/Nginx/Node/FFmpeg/etc 后端）
- 时尚的用户界面
- 使用Golden Retriever进行可选文件恢复（浏览器崩溃后）
- 会说多种语言（i18n）
- 构建时充分考虑了可访问性
- 永远免费提供给全世界
- 像小狗一样可爱，还接受猫咪照片
效果如上图所示，下面是使用方法。
三种安装方式
复制
npm install @uppy/core
yarn add @uppy/core
cdn引入
<!-- 1. Add CSS to `<head>` -->
<link
href="https://releases.transloadit.com/uppy/v4.0.5/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.0.5/uppy.min.mjs'
const uppy = new Uppy()
uppy.use(Dashboard, { target: '#files-drag-drop' })
uppy.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
</script>
怎么方便怎么来。
完整示例
复制
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)
})
评论 （0）