アップロード画像ボタンをクリックすると、モーダルが開きます。 イメージタイトル、入力ファイルと呼ばれる2つの異なるフィールドがあります。 保存ボタンを送信してください。 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">×</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);
};