Image placeholder

Uppy – 模块化文件上传插件

Image placeholder
F2EX 2016-12-14

Uppy 是(会是)一个流行的模块化文件上传插件,无缝集成任何框架。它从本地磁盘,Google云端硬盘,Dropbox,Instagram,远程URL,摄像机和其他位置提取文件,然后将其上传到最终目的地。它非常快速并且易于使用。

用法

目前,作者建议不要在生产环境中使用Uppy。

引入文件

在 HTML <body> 的底部添加脚本:

<script src="https://unpkg.com/uppy/dist/uppy.min.js"></script>

将 CSS 添加到 HTML <head>:

<link href="https://unpkg.com/uppy/dist/uppy.min.css" rel="stylesheet">
初始化
var uppy = new Uppy.Core({locales: Uppy.locales.ru_RU, debug: true})
  uppy.use(Uppy.DragDrop, {target: '.UppyDragDrop'})
  uppy.use(Uppy.Tus10, {endpoint: '//tusd.tus.io/files/'})
  uppy.run()

API

核心事件:上传 – 文件上传进度可用时的进度

uppy.on('core:upload-progress', (data) => {
  console.log(data.id, data.bytesUploaded, data.bytesTotal)
})

核心事件:上传 – 在一次上传完成时成功

uppy.on('core:upload-success', (fileId, url) => {
  console.log(url)
  var img = new Image()
  img.width = 300
  img.alt = fileId
  img.src = url
  document.body.appendChild(img)
})

核心事件:所有上传完成后成功

uppy.on('core:success', (fileCount) => {
  console.log(fileCount)
})

演示


2017-08-07