1

有几种方法可以回答这个问题。我会欣然接受带有node-upload-progress的解决方案或允许上传进度监控的 Express/强大解决方案（我喜欢这两者，但 Express 最近下降的强大支持让我的大脑爆炸了）。

我正在尝试创建一个页面，其中可以通过进度监控上传文件，以及与文件相关的其他字段，例如标题、提交者姓名、文件描述等。

我找到的第一个部分解决方案是node-upload-progress。它立即工作得很好。这是粘贴在此处以供参考的示例代码（我添加了一个我想要获取值的额外字段）。

应用程序.js

(function() {
    var app = require('http');
    var fs = require('fs');
    var uploadProgress = require('node-upload-progress');
    var uploadHandler = new uploadProgress.UploadHandler;

    uploadHandler.configure(function() {
        this.uploadDir = "" + __dirname + "/uploads";
        this.onEnd = customOnEndHandler;
    });

    function customOnEndHandler(req, res){
        res.writeHead(200, {'Content-Type': 'text/plain'});
        res.end('Yay! Upload finished.');
    }

    app.createServer(function(req, res) {
        if (req.url.match(/\/upload\?X\-Progress\-ID=.+/)) {
            console.log('upload started');
            return uploadHandler.upload(req, res);
        } else if (req.url.match(/\/progress\?X\-Progress\-ID=.+/)) {
            return uploadHandler.progress(req, res);
        } else {
            return fs.readFile("" + __dirname + "/index.html", function(err, data) {
                res.writeHead(200, {
                  'Content-Type': 'text/html'
                });
                res.write(data.toString());
                return res.end();
            });
        }
    }).listen(8080);

    console.log('Server running at http://localhost:8080/');

}).call(this);

索引.html：

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Upload</title>
    <meta name="author" content="Pablo Cantero <pablo@pablocantero.com>">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!-- Date: 2012-06-12 -->
    <script>
        $(function(){
            var uploadIntervalID;
            $('#form_upload').submit(function(){
                // Preventing multiples clicks on upload
                clearInterval(uploadIntervalID);
                var xProgressID = guidGenerator();
                $(this).attr('action', '/upload?X-Progress-ID=' + xProgressID);
                uploadIntervalID = setInterval(function(){
                    $.get('/progress?X-Progress-ID=' + xProgressID, function(data){
                        if(data.status === 'done'){
                            clearInterval(uploadIntervalID);
                        }
                        updateUploadStatus(data);
                    }).error(function(){clearInterval(uploadIntervalID)});
                }, 250);
                return true;
            });

            function updateUploadStatus(data){
                $('#upload_percent').text(data.percent);
                $('#upload_status').text(data.status);
                $('#upload_filename').text(data.fileName);
                $('#upload_filepath').text(data.filePath);
            }

            // http://stackoverflow.com/a/105074/464685
            function guidGenerator() {
                return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
            }

            function S4() {
                return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
            }
        });
    </script>
</head>
<body>
    <h1>Super Upload</h1>
    <form action="/upload?X-Progress-ID=1" enctype="multipart/form-data" method="post" id="form_upload" target="iframe_upload">
        <p>
            <label>File</label><br/>
            <input type="file" name="upload" id="upload"><br>
            <span id="upload_percent"></span><br/>
            <span id="upload_status"></span><br/>
            <span id="upload_filename"></span><br/>
            <span id="upload_filepath"></span>
        </p>

        <p>
            <div>File Title</div>
            <input name="file-title" type="text" maxlength="120" value="test value" />
        </p>

        <p>
            <input type="submit" value="Upload">
        </p>
    </form>
    <iframe id="iframe_upload" name="iframe_upload"></iframe>
</body>
</html>

在进一步研究表单解析时，我开始发现要使用强大的东西，并且它与 Express 配合得很好（这非常适合提供我想要创建的前端并提供更简单的基本身份验证来访问它）......直到 Express 放弃/正在放弃内置强大的支持。

关于如何解决这个问题的任何好的想法和/或例子？我的直觉告诉我要坚持使用 node-upload-progress 并弄清楚如何从头开始解析额外的表单值，这样我才能更好地理解和欣赏 Express 和强大的报价等便利模块。

感谢您提前帮助 node.js 新人。:D

4

0 回答 0