NodeJS Web 应用程序文件上传会删除文件开头

发布于 2024-11-29 12:03:16 字数 1693 浏览 0 评论 0原文

我正在做一个 NodeJS 项目,涉及文件上传。上传是在客户端使用以下代码完成的:

$('#file-upload').bind('change focus click', function() {
    var file = jQuery(this)[0].files[0];
    if (file && file.fileName) {
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener('progress', onProgressHandler, false);
        xhr.upload.addEventListener('load', transferComplete, false);
        xhr.open('POST', '/upload', true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.setRequestHeader('X-File-Name', encodeURIComponent(file.fileName));
        xhr.setRequestHeader('Content-Type', 'application/octet-stream');
        xhr.send(file);


        function onProgressHandler(evt) {
            var percentage = event.loaded/event.total*100;
            console.log(percentage);
        }
        function transferComplete(evt) {
            console.log('Done');
        }
    }
});

在服务器端,我使用:

app.post('/upload', function(req, res, next) {
    if(req.xhr) {
        console.log('Uploading...');
        var fName = req.header('x-file-name');
        var fSize = req.header('x-file-size');
        var fType = req.header('x-file-type');
        var ws = fs.createWriteStream('./'+fName)

        req.on('data', function(data) {
            console.log('DATA');
            ws.write(data);
        });
        req.on('end', function() {
            console.log('All Done!!!!');
        });
    }
});

该代码确实可以单独工作,但是当与我的更大项目的其余部分结合使用时,它似乎会砍掉大文件的开头,并忽略所有小文件。如果我上传一个小文件,则 console.log('DATA') 永远不会触发,并且它会针对大文件触发,但不会针对文件的开头触发。我相信由于某种原因它提前发送了文件,当我的函数接收到它时,开头(或者在小文件的情况下,整个文件)已经发送了。不过,我不知道是什么原因造成的。

谢谢!

I'm working on a project in NodeJS which involves file upload. The upload is done on the client side with the code:

$('#file-upload').bind('change focus click', function() {
    var file = jQuery(this)[0].files[0];
    if (file && file.fileName) {
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener('progress', onProgressHandler, false);
        xhr.upload.addEventListener('load', transferComplete, false);
        xhr.open('POST', '/upload', true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.setRequestHeader('X-File-Name', encodeURIComponent(file.fileName));
        xhr.setRequestHeader('Content-Type', 'application/octet-stream');
        xhr.send(file);


        function onProgressHandler(evt) {
            var percentage = event.loaded/event.total*100;
            console.log(percentage);
        }
        function transferComplete(evt) {
            console.log('Done');
        }
    }
});

And on the server-side, I use:

app.post('/upload', function(req, res, next) {
    if(req.xhr) {
        console.log('Uploading...');
        var fName = req.header('x-file-name');
        var fSize = req.header('x-file-size');
        var fType = req.header('x-file-type');
        var ws = fs.createWriteStream('./'+fName)

        req.on('data', function(data) {
            console.log('DATA');
            ws.write(data);
        });
        req.on('end', function() {
            console.log('All Done!!!!');
        });
    }
});

This code does work alone, but when combined with the rest of my much larger project, it seems to chop of the beginning of large files, and ignore small files all together. If I upload a small file, the console.log('DATA') never fires and it does fire for large files, but not for the beginning of the file. I believe for some reason it is sending the file early and by the time my function picks it up the beginning (or in the case of a small file, the entire thing) has already sent. I don't know what would be causing this, though.

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

把时间冻结 2024-12-06 12:03:16

我想通了。我定义的路线和运行的实际文件上传代码之间有太多逻辑,以至于它还没有准备好侦听文件。

I figured it out. There was so much logic between my route being defined and the actual file upload code running that it wasn't ready listening for the file.

秋风の叶未落 2024-12-06 12:03:16

我遇到了同样的问题。让我困扰的是,请求和 on('data') 事件之间有太多的逻辑是问题所在。我正在使用本地服务器进行测试,请求开始和注册数据事件之间的逻辑量可以忽略不计。但事实上,我不需要通过互联网来进行上传,这导致了这个问题您还遇到这个问题吗?

I am having this exact same problem. It bothers me that having too much logic between the request and the on('data') event is the problem. I"m testing with a local server, and the amount of logic between the start of the request and registering the on data event is negligible. But the fact that I don't need to cross the internet to do my upload is making this problem that much worse? Are you still experiencing this issue?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文