使用 Tus 协议恢复文件上传

Resume file uploading using Tus protocol

我正在使用Laravel开发网站,我正在使用tus-js-client直接上传文件到 Vimeo 而不通过我的服务器。上传完美。

但是,假设上传达到 44%,然后用户刷新了浏览器...据我了解,当用户再次开始上传同一文件时,它应该从 44% 继续上传...但事实并非如此t happen and it start from the beginning.

我认为发生这种情况是因为当我向 Vimeo 发送 API 请求以获取 upload_link ( step 1 ) 它会每次用户刷新页面时给我一个新的 upload_link..

 // Upload process start 
  var self = this;

  // Send request to server to get (upload.upload_link) from Vimeo API (Step 1)
  var uploadEndPoint = self.getUploadEndPoint();

  // Start uploading ( Step 2 )
  self.uploader = new tus.Upload(file, {
    uploadUrl: uploadEndPoint,
    retryDelays: [0, 1000, 3000, 5000],
    metadata: {
      filename: file.name,
      filetype: file.type
    },
    resume: true,
    uploadSize: file.size,
    onError: function(error) {
      console.log("Failed because: " + error);
    },
    onProgress: function(bytesUploaded, bytesTotal) {
      var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);
      console.log(bytesUploaded, bytesTotal, percentage + "%");
    },
    onSuccess: function() {
      console.log(
        "Download %s from %s",
        self.uploader.file.name,
        self.uploader.url
      );
    }
  });

处理此问题的最佳方法是什么,以便用户可以恢复上传?

我做了什么:

  1. 设置Laravel后端端点以获取下载link
  2. 对于第一个端点请求,从您的后端向 Vimeo 发出请求并在后端
  3. 上保存上传link
  4. 对于进一步的请求,检查客户端是否要下载相同的文件(按名称和大小,或按哈希),如果是 return 保存上传link,如果不请求新文件

这样做我解决了两个问题:

  • 保留上传记录link直到文件未完全上传
  • 在服务器上保持我的永久 Vimeo 访问令牌不受损害,仅在客户端发送上传 link