使用Multer上传文件时显示进度

Question

我遇到了一些麻烦，我正在尝试自学一些NodeJS，但我遇到了麻烦。 我正在尝试使用Multer上传文件，该文件已经可以正常使用，但是我想在同一页面上显示文件上传的进度。因此，我使用进度流进行显示，可以在控制台中进行完全打印，但是现在的问题是在从中上传文件的页面上显示该消息。

最后一个问题是：如何使用从变量“ p”获得的输出来显示upload.ejs的进度？

这是我目前拥有的代码

users.js

router.get('/upload', ensureAuthenticated, function(req, res){
    res.render('authed/upload');
});


router.post('/upload-files', function(req, res){
    var p = progress();
    req.pipe(p);
    p.headers = req.headers;

    var sendStream = multer({ storage: storage }).any();

    p.on('progress', function(progress){
        console.log(progress);
    })
    console.log(req.files);

    sendStream(p, res, function(){
        console.log('file has been uploaded');
    });


    req.flash('success', 'File(s) have been uploaded!');

    res.location('/upload');
    res.redirect('/upload');

})

upload.ejs

<% include ../partials/header %>
<% include ../partials/navbar %>

<div class="container">
    <div class="row">
        <div class="col-sm-12 file-upload-wrapper">
        <%- messages() %>
        <div class="w-100 text-center" style="padding-bottom: 2rem;">
            <h2 id="fileupload-text">File Upload</h2>
            <hr class="custom-hr">
        </div>
            <div class="row no-spacing">
                <div class="col-sm-6 no-spacing">


                    <form action="upload-files" method="post" enctype="multipart/form-data">
                        <div class="drag-files">
                            <i class="fas fa-upload"></i>
                            <p>Drag Files to Upload (not yet implemented)</p>
                        </div>
                        <input type="button" class="browse-files-button w-100" onclick="document.getElementById('file').click();" value="BROWSE FILES">
                        <input type="file" id="file" name="file" style="display: none;" multiple>
                        <input type="submit" value="Submit">
                    </form>

                </div>
                <div class="col-sm-6 no-spacing">
                    <div class="uploading-files">
                        <p id="uploading-text">Uploading</p>

                        <div class="file-uploading">
                            <div class="row no-spacing">
                                <i class="far fa-image file-uploading-image"></i>
                                <p class="file-uploading-name">Photo.png</p>
                                <p class="file-uploading-size">7.5 mb</p>
                            </div>
                            <div class="row no-spacing">
                                <progress id="file-progress" class="w-100" max="100" value="0" name="file">
                                    0%
                                </progress>
                            </div>
                            <div class="row no-spacing">
                                <p id="test1" class="file-uploading-precentage" style="padding-right: 2px;">0%</p><p>done</p>
                                <p class="file-uploading-speed" style="margin-left: auto">50KB/sec</p>
                            </div>
                        </div>

                        <div class="file-uploading">
                            <div class="row no-spacing">
                                <i class="far fa-image file-uploading-image"></i>
                                <p class="file-uploading-name">Photo.png</p>
                                <p class="file-uploading-size">7.5 mb</p>
                            </div>
                            <div class="row no-spacing">
                                <progress id="file-progress" class="w-100" max="100" value="0" name="file">
                                    0%
                                </progress>
                            </div>
                            <div class="row no-spacing">
                                <p id="test1" class="file-uploading-precentage" style="padding-right: 2px;">0%</p><p>done</p>
                                <p class="file-uploading-speed" style="margin-left: auto">50KB/sec</p>
                            </div>
                        </div>

                        <div class="file-uploading">
                            <div class="row no-spacing">
                                <i class="far fa-image file-uploading-image"></i>
                                <p class="file-uploading-name">Photo.png</p>
                                <p class="file-uploading-size">7.5 mb</p>
                            </div>
                            <div class="row no-spacing">
                                <progress id="file-progress" class="w-100" max="100" value="0" name="file">
                                    0%
                                </progress>
                            </div>
                            <div class="row no-spacing">
                                <p id="test1" class="file-uploading-precentage" style="padding-right: 2px;">0%</p><p>done</p>
                                <p class="file-uploading-speed">50KB/sec</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<% include ../partials/footer %>