如何使用 tus-client 恢复和上传文件上传

Question

我想pause和resume文件上传如本例所示https://tus.io/demo.html

我正在使用这个https://github.com/tus/tus-js-client 插件

我搜索了所有地方，但没有找到任何解决方案

问题：我想pause 和resume fileupload 获取多个文件

这是我的完整代码： https://codepen.io/eabangalore/pen/dwXEMM?editors=1010

请帮助我提前谢谢！

Answer 1

您可以使用 Uppy File Uploader 进行可恢复的上传。它封装了 tus-js-client.js 并提供了一个简化的接口。

您可以找到它的文档here 和现场示例here

在您的网页上导入 Uppy JS 和 CSS 文件后，您需要编写一些类似于以下内容的脚本：

<script type="text/javascript">
  var uppy = new Uppy.Core({ debug: true, autoProceed: false });
  uppy.use(Uppy.Dashboard, {
    trigger: '.UppyModalOpenerBtn',
    inline: true,
    target: '.DashboardContainer'
});
  uppy.use(Uppy.Tus10, { endpoint: 'http://localhost:1080/files/' });
  uppy.run();
</script>

一些 HTML：

<div class="DashboardContainer"></div>

希望这会有所帮助。如果没有，请随时进一步讨论该问题。

编辑

如 cmets 中所述，您希望使用tus-client-js 而不是 Uppy 上传多个文件。 为此，您可以查看这篇文章来处理多个上传场景： https://github.com/tus/tus-js-client/issues/115

这篇文章是关于在第一个文件成功完成后启动另一个文件上传。

编辑

根据tus-js-client库中的documentation，您需要调用abort来暂停和调用文件上传对象的start方法来暂停/恢复上传：

1. 如果用户/应用程序希望使用 Upload#abort 暂停上传，可选择暂停上传。这将导致任何当前正在运行的传输立即停止。

2. 可以选择通过再次调用 Upload#start 来恢复先前暂停的上传。这将在该点恢复上传 它以前停止过。您也可以使用此方法继续 发生错误后上传。

要了解更多关于幕后发生的事情，请访问link。