Question

我正在使用NodeJS中的qr代码生成器，我已经成功地使用数据生成了QR代码，但是并没有在我的HTML文件上打印出来

这是HTML中的代码：

<div class="container">
<div class="row justify-content-center">
    <div class="col-md-6 align-self-center" style="margin-top: 13%;">
        <h1 class="text-center text-light">Convert your text to QR code</h1>
        <form>
            <div class="form-group">
                <label for="input_text"></label>
                <input type="text" class="form-control form-control-lg  " id="input_text" placeholder="Enter Your Text Here">

            </div>

            <button type="button" id="gen" class="btn btn-primary btn-block">Generate QR Code</button>
        </form>
    </div>
</div>



  <script
    src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"
></script>
<script>
        document.querySelector('#gen').addEventListener('click', function () {
            // Get the text from input
            let txt = document.querySelector('#input_text').value;

            // Do not send request if field is empty
            if(txt !== ''){
                 var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        console.log(this.responseText.qr_img);
                        let res = JSON.parse(this.responseText);
                        let img = document.querySelector('#qr-code-img');
                        // Set img source
                        img.src = res.qr_img;
                        // Show the image
                        img.classList.remove('d-none');
                    }
                };
                xhttp.open("POST", "/qrcode", true);
                xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhttp.send("qr_text=" + txt);
            }

        });
</script>

还有NodeJS文件：

    app.post('/qrcode', (req, res, next) => {
  console.log("Test ok");
    // Get the text to generate QR code
    let qr_txt = req.body.qr_text;

    // Generate QR Code from text
    var qr_png = qr.imageSync(qr_txt,{ type: 'png'})
    // Generate a random file name
    let qr_code_file_name = new Date().getTime() + '.png';
    fs.writeFileSync('./qr/' + qr_code_file_name, qr_png, (err) => {
        if(err){
            console.log(err);
        }

    })
    // Send the link of generated QR code
    res.send({
        'qr_img': "qr/" + qr_code_file_name
    });
});
app.listen(3000, function(){
  console.log("Server started on port 3000");
})

但是在我的本地主机上，我得到了：

Résumé
URL: http://localhost:3000/qr/1565166898797.png
État: 404 Not Found
Source: Réseau
Adresse: ::1:3000

这是我的结构：

我认为我尊重结构，但是没有显示QR码，我该怎么办？

谢谢

Answer 1

您的服务器的路由为app.post('/qrcode'

没有有通往/qr/:filename的路线。

在文件系统上创建文件并不会自动使其通过HTTP可用。

使用static module来提供服务qr目录中所有文件的途径。

为什么我的HTML文件不能正确显示？

1 个答案: