我计划在浏览器中使用文件流 api。通过搜索,我找到了这个filestream模块。
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);
-
1.
在这段代码中......我完全感到沮丧。 这段代码适用于哪一边?服务器端?或者客户端代码?
如果是服务器端代码,create-server 方法在哪里以及如何读取 document.body.~ 代码?
如果是客户端代码,如何在浏览器中使用“require”方法?
最重要的是,这是可运行的代码吗?
-
2.
抛开之前的问题,我尝试运行这段代码。为此,我安装了“crel”、“feature”、“drag-and-drop-files”模块,并给出命令: $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')
代码中。我阅读了 npm 页面中的“feature”模块并仔细阅读了说明,但我仍然无法理解。请参阅此页面链接,我不知道作者为什么使用 detect('URL')
,而不是 window.URL
。你能解释一下吗?我真的很感激和你在一起。
最佳答案
问题1:
document.body
通常是 window
对象的属性,因此该示例适用于客户端。或者您可以使用一些模块,例如:jsdom 。然后就可以在node中使用window了。
require
是 CommonJS 中的函数模块规范。您可以使用browserify或webpack为客户端编译它。
问题2:
如上所述,您应该使用 CommonJS 模块构建工具或使用 jsdom 作为服务器端。
createElement
是 window.document
上的一个方法。
更新:
问题3:
require('功能/检测');
需要detect.js在 feature
npm 模块
如您所见,它测试了 ms
、o
、moz
、webkit
前缀以及目标功能窗口。
在下面的链接底部,有一个浏览器兼容性
表。
https://developer.mozilla.org/en-US/docs/Web/API/Window/URL
在 Chrome 8.0、Opera 15.0 和 Safari 6.0 中 URL
存在为 webkitURL
。
这就是作者这样做的原因。
关于javascript - 如何运行 npm 'filestream' 示例代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30043624/