Question

我已经设法使用HTML和JS在我的页面上加载图像，但我似乎无法将图像发布到我的MongoDB，它不会显示在我的家中＆＃39;页。

HTML：

<div class="container">
    <h1 style="text-align: center">Post a New Guitar</h1>
    <div class="col-md-6">
        <form action="/guitars" method="POST">
        <div class="input-group">
            <label>Item Name</label>
            <div class="input-group">
                <input class="form-control" type="text" name="name" placeholder="Name">
            </div>
            <label>Upload Image</label>
            <div class="input-group">
        <span class="input-group-btn">
            <span class="btn btn-default btn-file">
                Browse… <input type="file" id="imgInp">
            </span>
        </span>
        <input type="text" class="form-control" readonly>
    </div>
    <img id="img-upload"/>

      <div class="input-group">
            <button class="btn btn-lg btn-primary btn-block">Submit!</button>
        </div>

    <a href="/guitars">Go Back</a>
</div>

JS：

        $(document).ready( function() {
            $(document).on('change', '.btn-file :file', function() {
               var input = $(this),
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [label]);
    });

    $('.btn-file :file').on('fileselect', function(event, label) {

        var input = $(this).parents('.input-group').find(':text'),
            log = label;

        if( input.length ) {
            input.val(log);
        } else {
            if( log ) alert(log);
        }

    });
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#img-upload').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL(this);
    });     
});

提交表单时，我希望它显示使用JS上传的图像，并将其保存为＆＃39;到我的数据库。

Answer 1

你是什么意思＆＃34;将图像发布到MongoDB＆＃34;？你不应该在数据库中保存图像。

您要做的是当您上传图片时，将其存储在服务器中可公开访问的位置。您在数据库中保存的不是图像本身，而是图像在服务器上的位置。

存储在服务器中的图片： /home/public/image.jpg

存储在Mongo DB中的图像路径： { path: '/home/public/image.jpg' }

当您返回到html页面时，您只需要查询Mongo DB中图像的路径，并将该值用作图像标记中的源。

`<img src="${path}" />`

使用HTML，JS和MONGODB上传和显示图像

1 个答案: