用uppy+tusd搭建简单的内网文件分享服务

团队文件共享时,通常有两种场景,一种是共享比较固定的文件,比如工具软件,还有一种是临时需要分享的文件,比如刚刚修改好的ppt excel。
对于前者,用samba可以比较好的满足需求。后一种情况用samba,通常会导致文件夹下面大量无用的文件,既不方便管理,也不方便分享后的查找。

也有团队使用qq或者微信给对方传文件,但是有些公司不一定允许开qq。

在尝试了多种方法后,我发现用uppy和tusd可以比较好的解决这个问题。

tus是一种文件传输协议,支持断点续传,并且有tusd这种现成的server,tusd用go实现,可以直接用编译好的二进制bin文件启动。
uppy是一个用js实现的文件上传库,并且支持tus协议,配置起来非常简单。

tusd配置启动

先下载tusd的bin文件到本地,然后启动

wget https://github.com/tus/tusd/releases/download/0.11.0/tusd_linux_amd64.tar.gz
tar xvf tusd_linux_amd64.tar.gz
cd tusd_linux_amd64
./tusd -dir ./data

这样tusd就会在当前目录创建一个data目录,用于存放上传的文件,并且监听1080端口。

uppy配置

直接把这个html文件放到nginx或者其他能够支持静态文件host的web工具下。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Uppy</title>
    <link href="https://transloadit.edgly.net/releases/uppy/v1.0.0/uppy.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="drag-drop-area"></div>

    <script src="https://transloadit.edgly.net/releases/uppy/v1.0.0/uppy.min.js"></script>
    <script>
      var uppy = Uppy.Core()
        .use(Uppy.Dashboard, {
          inline: true,
          target: '#drag-drop-area'
        })
        .use(Uppy.Tus, {endpoint: 'http://localhost:1080/files/'})

      uppy.on('complete', (result) => {
        console.log('Upload complete! We’ve uploaded these files:', result.successful)
      })
    </script>
  </body>
</html>

使用

配置好uppy和tusd后,比如在localhost:8000启动了uppy的静态web,打开后可以看到如下页面,点右上角+号从本地目录选择文件,或者直接拖拽进来都可以,上传完成后,会生成链接,点击link就可以获取链接到剪贴板,然后通过邮件把文件地址发给对方即可。


Screenshot from 2019-04-29 10-40-07.png

总结

上面已经实现了基本的文件分享功能,其实还可以把tusd的启动做成service,这样就可以开机启动,uppy的js文件,也可以放到本地,这样即使是cdn出了问题,也可以正常使用。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容