express上传图片中间件

mac2022-06-30 12

上传图片

使用一个中间件(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设置

最新回复(0)