如何將圖像從前端上傳到後端

我有一個按鈕，名爲上載圖片。單擊該按鈕時，將打開一個模式。有兩個不同的字段，稱爲圖像標題，輸入文件。提交保存按鈕。它將轉到image.js文件。我無法理解如何將這些圖像保存到我的數據庫中。有人請幫助我。如何將圖像從前端上傳到後端

前端代碼

/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的後端代碼

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

來源

2017-02-11 joy

你必須使用，用戶可以選擇圖像的HTML表單和表單被提交。然後在您的路線中，圖像數據將作爲緩衝區提供。

來源

2017-02-11 12:04:54 ChemicalRocketeer

你需要在你的nodeJS後端放置multer。

前端：

$('#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 
     } 
    }) 
});

後端（假設應用程序正在偵聽）：

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

來源

2017-02-11 12:16:47 pandamakes

如何將圖像從前端上傳到後端

回答

相關問題