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