express上传图片中间件

上传图片

使用一个中间件(multer),它依赖于express;

文件提交方式必须是post提交;

安装

npm install --save multer

引入模块(它依赖于express)

//第一步
//引入express并配置
const express = require('express');
const app = express();
//添加端口号
app.listen(3000, function () {
    console.log('server is runing port 3000');
});

//第二步 此配置要在使用相对应的upload方法文件中配置
const multer = require('multer');//加载模块
//第三步:配置磁盘存储引擎
//图片的上传需要借助 磁盘存储引擎 来将用户上传的图片在服务端保存
//磁盘存储引擎 (DiskStorage)可以让你控制文件的存储。

//以下配置要在挂载路由之前
var storage = multer.diskStorage({
    //表示图片上传后将保存的路径地址
    //设置上传文件路径后,uploads文件夹将会在服务器相对应的路径下创建
    //由于服务器文件夹的权限不同,如果自动创建失败,可以手动在相应的路径下手动创建文件夹
  destination: function (req, file, cb) {
    cb(null, './uploads')
  },
    //给上传的文件进行重命名,获取添加后缀名
    //自己拼接的随机字符串,如果有重复,建议去买彩票;
   //let radoms= new Date().getTime()+Math.random().toString(36).substr(2).slice(1,6)+Math.random().toString(36).substr(2).slice(1,6);
  //给上传的文件进行重命名,获取添加后缀名
    filename: function (req, file, cb) {
        //为了防止小概率文件名相同,可以再文件名当中拼接当前的时间戳,或在时间戳后面添加随机数,
        let data2=new Date().getTime()+Math.random().toString(36).substr(2).slice(1,6)+Math.random().toString(36).substr(2).slice(1,6);
        //file.fieldname + '-' + Date.now()表示对文件的名字进行命名,
        let names=file.originalname.split('.');
        let file_type=['jpg','gif','png','jpeg'];
        //给上传的文件命名并进行上传,在此之前对文件进行判断,如果文件不符合要就,禁止上传
        cb(null, data2+'.'+ names[names.length-1]);
    }
})

var upload = multer({ storage: storage })

在路由中的配置

router.post('/fabu_post_page/',upload.single('hehe'),fabu_service.user_img_sumbit_page);

业务逻辑模块

//上传图片
exports.user_img_sumbit_page=function(req,res){
    res.send({
        err:1,
        imgname:req.file.filename,
        msg:'上传图片成功'
    })
};

前端提交页面

var file_submin = document.getElementById('wenjian');//文件input的id
							let file_submins = file_submin.files;
		 					var formdata = new FormData();
		 					formdata.append('hehe', file_submins[0])//hehe表示提交的文件name
		 					$.ajax({
		 						type: "post",
		 						url: "/fabu_post_page/",
		 						cache: false, //需不需要创建缓存    不必须
		 						data:formdata,
		 						processData: false, //不需要对数据做处理        必须
		 						contentType: false, //用表单数据创建的fromdata已经声明过enctype,所以这里设置为false
		 						async: true,
		 						success: function(data) {
		 							console.log(data);
		 							
		 						}
		 					});

前端文件提交局部代码

上传图片form表单必须设置enctype=“multipart/form-data”

也可以在ajax提交的时候通过contentType设置

<form enctype="multipart/form-data" class="form-horizontal">
										<div class="hr-line-dashed"></div>
										<div class="form-group">
											<label class="col-sm-2 control-label">资讯配图</label>
											<div class="col-sm-10">
												<input type="file" class="form-control" name="hehe" id="wenjian">
												<input type="text" id="token02" name="usersys_token" value="" style="display: none;" />
											</div>
										</div>

										<div class="hr-line-dashed"></div>
										<div class="form-group">
											<div class="col-sm-4 col-sm-offset-2">
											</div>
										</div>
									</form>