Question

我打算在浏览器中使用文件流api。通过搜索，我找到了这个文件流模块。

https://github.com/DamonOehlman/filestream

作者写了一个示例用法代码。这里是。（文件名：drag-n-drop.js）

var crel = require('crel');
var detect = require('feature/detect');
var dnd = require('drag-and-drop-files');
var img = crel('img');
var video = crel('video', { autoplay: true });
var FileReadStream = require('filestream/read');
var FileWriteStream = require('filestream/write');

function upload(files) {
  var queue = [].concat(files);

  function sendNext() {
    var writer = new FileWriteStream();
    var next = queue.shift();

    console.log('sending file');
    new FileReadStream(next).pipe(writer).on('file', function(file) {
      console.log('file created: ', file);
      img.src = detect('URL').createObjectURL(file);
      // video.src = detect('URL').createObjectURL(next);

      if (queue.length > 0) {
        sendNext();
      }
    });
  }

  sendNext();
}

dnd(document.body, upload);

document.body.appendChild(crel('style', 'body, html { margin: 0; width: 100%; height: 100% }'));
document.body.appendChild(img);
document.body.appendChild(video);

在这段代码中......我非常沮丧。这段代码适用于哪一方？服务器端？还是客户端代码？

如果服务器端代码，create-server方法在哪里以及如何读取document.body .~代码？

如果客户端代码，如何使用＆＃39;要求＆＃39;浏览器中的方法？

最重要的是，这个可运行的代码吗？

抛开前面的问题，我试着运行这段代码。为此，我安装了＆＃39; crel＆＃39;，＆＃39;功能＆＃39;，＆＃39;拖放文件＆＃39;模块，并发出命令：$node drag-n-drop.js

但是，它不起作用，错误信息就是这样。这也让我感到沮丧...

[appPath]/node_modules/crel/crel.js:91
        element = crel[isElementString](element) ? element : d.createElement(e
                                                               ^
TypeError: undefined is not a function
    at crel ([appPath]/node_modules/crel/crel.js:91:64)
    at Object.<anonymous> ([appPath]/node_modules/filestream/examples/drag-n-drop.js:4:11)

帮助！

更新。 3。

嘿。我可以问你一个问题吗？我正在调整文件流模块到我的代码，引用上面的示例代码。在做的时候，我陷入detect('URL')代码。我阅读了＆＃39;功能＆＃39; npm页面中的模块并仔细阅读说明，但我仍然无法理解。请参阅此页面链接，我不知道作者为何使用detect('URL')，而不是window.URL。你能解释一下吗？我非常感谢你。

Answer 1

问题1：

document.body通常是window对象的属性，因此示例适用于客户端。或者您可以使用某些模块，例如：jsdom。然后你可以在节点中使用窗口。

require是CommonJS模块规范中的函数。您可以使用browserify或webpack为客户端编译它。

问题2：

如上所述，您应该使用CommonJS模块构建工具或使用jsdom作为服务器端。

createElement是window.document上的一种方法。

<强>更新

问题3：

require('feature/detect');

将需要feature npm模块中的detect.js

正如您所看到的，它会在窗口上测试ms，o，moz，webkit前缀和目标功能。

在下方链接的底部，有一个Browser compatibility表。

https://developer.mozilla.org/en-US/docs/Web/API/Window/URL

在Chrome 8.0中，Opera 15.0和Safari 6.0 URL以webkitURL的形式存在。

这就是为什么作者这样做的。

如何运行npm＆＃39; filestream＆＃39;示例代码？

1 个答案: