博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用Jquery,formData,Express,multer中间件实现文件上传
阅读量:4988 次
发布时间:2019-06-12

本文共 1721 字,大约阅读时间需要 5 分钟。

首先使用easyUI放置文件上传组件。用于用户获取本地文件。

<form id="file-upload" name="file-upload"

enctype='multipart/form-data' >
    <div style="margin:20px 0;"></div>
    <input id="fb" name="emp_inf" multiple='mutiple' class="easyui-filebox" style="width:400px"
data-options="prompt:'Please choose a file...'">
    <div style="margin:20px 0;"></div>
</form>

Form的name用于ajax获取数据,emp_inf用于后台获取文件。接下来ajax使用formData对文件数据进行格式化。

function fileupload() {

var formData = new FormData($('#file-upload')[0]);
$.ajax({
        url: '{
{projcfg.appurl}}/admin/api/project/employee/employee/upload',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
            alert('上传成功' + data);
refresh();
},
error: function (data) {
            alert('上传失败' + data);
refresh();
}
    });
}

接下来就是很重要是的,我们需要在app.js中首先对文件上传路径进行设置,以及引入multer中间件。Multer中间件在使用的时候需要在0.1.8-0.1.6版本,在安装的时候使用

npm install --save

否则在项目启动的时候multer();会被识别为不是一个方法。所以一定要注意版本号。

var multer=require('multer');

app.use(multer({
    dest: './public/file',
rename: function (fieldname, filename) {
return filename;
}
}));

以上dest是文件存放位置,rename是对上传文件进行改名。最后在路由中直接使用req.files.emp_inf即可对文件相关信息进行获取,并且文件会上传在./public/file路径下。这样的上传方式不会更改文件的名字,也不会对文件类型和大小进行验证拦截。详情请参照multer中间件文档(https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md)

最后就是获取相关的文件信息,这里并不需要引入fs模块,因为暂时我们还不需要对文件进行操作。在需要对文件进行操作的时候再引入fs模块。一般都是在service中进行文件操作。

router.route('/upload').post(function (req, res) {

var file=req.files.emp_inf;
console.log(file.encoding);
console.log(file.extension);
console.log(file.filename);
console.log(file.mimetype);
console.log(file.name);
console.log(file.originalname);
console.log(file.path);
console.log(file.size);
});

转载于:https://www.cnblogs.com/Ysera-Dreamer/p/7265248.html

你可能感兴趣的文章
WPF中,使用ICollectionView进行排序时,汉字排序出现问题的解决
查看>>
YARN的设计
查看>>
移动终端网页游戏移植研发框架【客户端战斗系统】
查看>>
查找算法之二分查找
查看>>
ionic的开发打包自己APP的步骤
查看>>
Xcode插件VVDocumenter Alcatraz KSImageNamed等安装
查看>>
C#面向对象设计模式纵横谈课堂笔记
查看>>
Mysql 用命令行导出导入数据方法
查看>>
redis操作
查看>>
assets转到内外部存储
查看>>
关于C#中使用is和as操作符来转型
查看>>
小程序v0.10基本布局
查看>>
关于copy深复制与浅复制的理解
查看>>
Genymotion下载及安装
查看>>
java初学3
查看>>
squid反向代理
查看>>
递归额面试题
查看>>
ObjectARX2010 学习笔记002:读取已经存在的DWG文件中的内容
查看>>
Linux系统学习(二)一Linux基本操作
查看>>
PL/SQL Developer登录出现——Using a filter for all users can lead to poor performance!
查看>>