上传图片
使用一个中间件(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>