如何将图片从前端上传到后端

Question

I have a button called Upload Image .On click that button,a modal is opening. There is two different field called Image Title, Input File . On submit the Save button. It will go to the image.js file. I am not able to understand how to save these image to my database. someone please help me.

Frontend Code

/modal.html

         <div class="container">
              <div class="row">
                  <div class="col-md-12">
                      <div class="uploadPhotoGallery">
                          <button type="button" data-toggle="modal" data-target="#myModal" id="uploadButton">Upload Image</button>
                      </div>                     
                  </div>
              </div>
         </div>
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Please Upload Image</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" class="form-control" id="imagetitle" placeholder="Image Title">
                </div>
                 <div class="form-group">
                     <input type="file" class="form-control" id="input-image" name="input-image" accept="image/*">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancle</button>
                <button type="submit" class="btn btn-default" id="myFormSubmit">Save</button>
            </div>
        </div>
    </div>
</div>
 <script src="javascript/image.js"></script> 

/image.js

$(function() {
    $('#myFormSubmit').click(function (e) {
       //How to send Image from here to backend
   });
});

Node.js Backend Code

/request.js

exports.addads = function(req, res) {
var addads = req.app.db.model('Adds');
      var data = { imageTitle       : req.body.imageTitle,
                   img              : "http://localhost:4040/"+req.body.img, };
      var query = addads(data);
      query.save(function(err,data)  {
        if(err) {
          console.log(err.toString());
        } else  { 
          //  console.log('Adds Added Successfully');
            res.json({ success: true });
            update_routers(req);
          }
      });
};

 //Image Logic  
    var file_url = '';
    var storage = multer.diskStorage({ //multers disk storage settings
        //console.log("sdfas");
        destination: function (req, file, cb) {
            cb(null, 'public/img/');
        },
        filename: function (req, file, cb) {
            var datetimestamp = Date.now();
            file_url = file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]
            cb(null, file_url);
        }
    });

    var upload = multer({ //multer settings
                    storage: storage
                }).single('file');

    /** API path that will upload the files */
    app.post('/uploadImage', function(req, res) {
      //  console.log("req*****", req.fields);
        upload(req,res,function(err){
            if(err){
                 res.json({error_code:1,err_desc:err});
                 return;
            }
            console.log("file_url", file_url);
            exec('convert '+ "public/img/" + file_url + " -resize 100x100 " + "public/img/" + file_url, function (err, out) {
              if (err) {
                console.log("error", err);
              } else {
                console.log("success");
                res.json({error_code:0,err_desc:null, file_url: 'img/'+file_url});
              }
           });
        });
    });

/route.js

router.post('/api/adds', requests.addads);

/schema/ads.js

exports = module.exports = function(app, mongoose) {
     var addsSchema = new mongoose.Schema({
       imageTitle     : { type: String, default: '' },    
       img            : { type: String, default: '' }

    });
    app.db.model('Adds', addsSchema);
  };

Answer 1

You will need multer on your nodeJS backend.

Front end:

$('#myFormSubmit').click(function (e) {
    var formdata = new FormData()
    formdata.append('photo',$('#input-image').files[0])
    $.ajax({
        method : 'POST',
        processData : false,
        contentType : false,
        url : '/imageupload',
        data : formdata,
        success : function(o){
            //callback here on success
        },
        error : function(e){
            //callback here on error
        }
    })
});

back end (assuming app is listening):

var multer = require('multer')
var upload = multer({dest : 'uploads/'}).single('photo') 
//make sure you have access to write files
//make sure 'photo' matches up with the field entered at the front end e.g. formdata.append('photo', ...)

app.post('/imageupload',upload,function(req,res){
    //req.file will now be available as a json object, save to mongodb, re: filename, path etc
    res.send('rabbit')
})