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

Question

I have managed to load the image on my page using HTML and JS but I can't seem to post the image to my MongoDB and it won't show on my 'home' page.

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);
    });     
});

When submitting the form, I want it to display the image that has been uploaded using JS and for it to be 'saved' to my database.

Answer 1

What do you mean by "post the image to MongoDB"? You shouldn't be saving image in the database.

What you want to do is when you upload in image, store it in a publicly accessible location in your server. What you save in the database is not the image itself but the location of the image on the server.

Image stored in the server: /home/public/image.jpg

Image path stored in Mongo DB: { path: '/home/public/image.jpg' }

When you go back to your html page, you just need to query the path of the image in Mongo DB and use that value as a source in your image tag.

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