轻量级JavaScript 文件上传组件-胖大海博客资源网

温馨提示：本文最后更新于2025-01-23 11:49:56，某些文章具有时效性，若有错误或已失效，请在下方留言或联系站长

上传功能很常见，自己写过于麻烦，直接使用大佬封装好的开源组件是个不错的选择。今天给大家分享一个轻量级JavaScript 文件上传组件，一键使用，支持自定义。

GitHub地址：https://github.com/transloadit/uppy

特征

轻量级、模块化、基于插件的架构，依赖性低
通过开放的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>
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>
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)
  })
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)
  })
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)
  })

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

------关注微信公众号：胖大海TuT------

版权声明 1 本网站名称：胖大海博客资源网
2 本站永久网址：https://www.pdha.top
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ941093035进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END