javascript - Resumable.js 无法将文件保存到服务器端目录

Question

我在我的 Node.js-express 应用程序中使用 Resumable.js。我可以知道文件传输成功了，因为我可以 console.log(req.body) 并在下面看到这个......

{ resumableChunkNumber: '77',
  resumableChunkSize: '1048576',
  resumableCurrentChunkSize: '1064195',
  resumableTotalSize: '80755971',
  resumableType: '',
  resumableIdentifier: '80755971-humanfastq',
  resumableFilename: 'human.fastq',
  resumableRelativePath: 'human.fastq',
  resumableTotalChunks: '77' }

文档对于在此之后的操作相当模糊。我需要将此文件保存到我服务器上的目录中。任何有关如何完成此操作的帮助将不胜感激。谢谢!

Answer 1

不是专家，但我确实尝试了一下，并找到了一个适合您的示例。您在问题中没有提供足够的信息，所以我将从头开始。

我关注了官方github repo 和提供的示例，我必须进行一些调整才能将文件 block 保存在特定目录中，然后进行更多调整以将这些 block 重新组合在一起，并进行更多调整以删除不必要的 block 。显然，所有这些调整都是代码中提供的提示，以及我浏览过的其他地方。显然 flow.js也在使用类似的机制(不完全确定)。

我基本上需要更改其中一个示例中的 app.js 以便能够从浏览器上传文件，然后将它们保存在本地。

1. 将目录位置传递给应添加文件 block 的可恢复文件
2. 提供必要的条件和命令，以便在上传 chunk 时创建写入流，然后使用 resumable 将 chunk 拼接在一起并保存为原始文件。
3. 最后删除所有的chunk

gist 的使用说明让 express-app 正常工作(您可以查看官方 github 示例并进行更改，或者您可以按照以下说明进行操作):

1. 创建目录
2. 从目录中的 gist 创建 app.js、resumable.js 和 resumable-node.js
3. 复制/粘贴 package.json 并执行 npm install 以获取模块(或手动 npm install 这些 express、path, fs, connect-multiparty)
4. 在主应用目录中创建uploads目录并确保它是可写的
5. 从 here 复制/粘贴 public 目录其中包含 .png 文件形式的 icons 以及用于上传的 style.css 和 index.html
6. 更改您刚刚复制到服务器地址的公共(public)目录中 index.html 的 49 或 50 行中的 target 值我的案例 http://localhost:3000/upload
7. 您可以在 index.html 中调整 block 大小、同时上传 block 的数量等，但我将它们保留为默认值(实际上，我将 block 从 3 更改为 4)
8. 完成以上所有操作，您就可以开始了。
9. 运行应用程序，即 nodemon app.js 或 node app.js
10. 导航到您的服务器地址或 http://localhost:3000/upload你会看到 index.html 呈现如下:

下面的控制台日志(注意结尾 - block 已删除。)

最后我在上传目录中有 image2.jpg。

TL;DR

您需要对 app.js 和 index.html 文件进行以下调整，以便能够通过 Resumable.js 上传和保存上传的文件。

index.html 已被调整以更改目标值，以在我的情况下将其指向服务器 url http://localhost:3000/upload

var r = new Resumable({
  target:'http://localhost:3000/upload',
  chunkSize:1*1024*1024,
  simultaneousUploads:4,
  testChunks:false,
  throttleProgressCallbacks:1
});

app.js 已被调整为向 resumable 发送一个保存文件的目录(最上面)。

var resumable = require('./resumable-node.js')(__dirname + "/uploads");

我还调整了 app.js 以更改 app.post('/uploads',...) 的内容，参见 gist .

// Handle uploads through Resumable.js
app.post('/upload', function(req, res){
  resumable.post(req, function(status, filename, original_filename, identifier){
    if (status === 'done') {
      var stream = fs.createWriteStream('./uploads/' + filename);

      //stich the chunks
      resumable.write(identifier, stream);
      stream.on('data', function(data){});
      stream.on('end', function(){});

      //delete chunks
      resumable.clean(identifier);
    }
    res.send(status, {
        // NOTE: Uncomment this funciton to enable cross-domain request.
        //'Access-Control-Allow-Origin': '*'
    });
  });
});

最后对 app.js 的调整是在最后一个路由处理程序，以下文件

s.createReadStream("./resumable.js").pipe(res);

我将文件 resumable.js 移动到与其他文件相同的目录中，因此我需要调整更改它的位置，以便 createReadStream 找到它。