脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 创建项目安装formidable
1.创建项目sampleUpload
cd 工作目录
exPress -e sampleUpload
2.修改package.json文件,添加formidable依赖项
复制代码
{
"name": "application-name",
"version": "0.0.1",
"PRivate": true,
"scripts": {
"start": "node ./bin/www"
},
"dePEndencies": {
"express": "~4.0.0",
"static-favicon": "~1.0.0",
"cookie-parser": "~1.0.1",
"body-parser": "~1.0.0",
"debug": "~0.7.4",
"ejs": "~0.8.5",
"formidable" : "latest"
}
}
复制代码
3.安装依赖项
cd sampleUpload && npm install
安装成功,一切准备就绪,开始完成这个功能!
实现上传功能
1.index.ejs文件中构建表单并实现前端验证(样式使用和https://www.cnblogs.COM/zhongweiv/p/nodejs_express_webapp.htML 一致)
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, inITial-scale=1.0">
<title><%= title %></title>
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/signin.css" />
</head>
<body>
<p id="container" class="container">
<% if (locals.success) { %>
<p id="alt_sucess" class="alert alert-success">
<%- success %>
</p>
<% } %>
<% if (locals.error) { %>
<p id="alt_warning" class="alert alert-warning">
<%= error %>
</p>
<% } %>
<form class="form-signin" role="form" method="post" enctype='multipart/form-data'>
<h2 class="form-signin-heading">上传文件</h2>
<input id="fulAvatar" name="fulAvatar" type="file" class="form-control" />
<br/>
<button id="BTnSub" class="btn btn-lg btn-Primary" type="submit">上 传</button>
</form>
</p>
</body>
</html>
<script src="/javascripts/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
String.prototype.format = function (args) {
if (arguments.length > 0) {
if (arguments.length == 1 && typeof (args) == "object") {
for (var key in args) {
if (args[key] != undefined) {
var reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, args[key]);
}
}
}
else {
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] != undefined) {
var reg = new RegExp("({)" + i + "(})", "g");
result = result.replace(reg, arguments[i]);
}
}
}
}
return result;
}
$(function(){
$('#btnSub').on('click',function(){
var fulAvatarVal = $('#fulAvatar').val(),
errorTip = '<p id="errorTip" class="alert alert-warning">{0}</p> ';
$("#errorTip,#alt_warning").remove();
if(fulAvatarVal.length == 0)
{
$("#container").prepend(errorTip.format('请选择要上传的文件'));
return false;
}
var extName = fulAvatarVal.substring(fulAvatarVal.lastIndexOf('.'),fulAvatarVal.length).toLowerCase();
if(extName != '.png' && extName != '.jpg'){
$("#container").prepend(errorTip.format('只支持png和jpg格式图片'));
return false;
}
return true;
})
});
</script>
复制代码
这里一定要注意表单的enctype属性,这个就不多作解释了,如果是初次接触,看看https://www.w3school.com.cn/tags/att_form_enctype.asp
2.实现index.js中上传逻辑
复制代码
var express = require('express')
router = express.Router(),
formidable = require('formidable'),
fs = require('fs'),
TITLE = 'formidable上传示例',
AVATAR_UPLOAD_FOLDER = '/avatar/'
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: TITLE });
});
router.post('/', function(req, res) {
var form = new formidable.IncomingForm(); //创建上传表单
form.encoding = 'utf-8'; //设置编辑
form.uploadDir = 'public' + AVATAR_UPLOAD_FOLDER; //设置上传目录
form.keepextensions = true; //保留后缀
form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
form.parse(req, function(err, fields, files) {
if (err) {
res.locals.error = err;
res.render('index', { title: TITLE });
return;
}
var extName = ''; //后缀名
switch (files.fulAvatar.type) {
case 'image/pjpeg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
}
if(extName.length == 0){
res.locals.error = '只支持png和jpg格式图片';
res.render('index', { title: TITLE });
return;
}
var avatarName = Math.random() + '.' + extName;
var newPath = form.uploadDir + avatarName;
console.LOG(newPath);
fs.renameSync(files.fulAvatar.path, newPath); //重命名
});
res.locals.success = '上传成功';
res.render('index', { title: TITLE });
});
module.exports = router;
复制代码
注意:在Public文件夹中创建avatar文件夹以供文件存放
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)全部内容,希望文章能够帮你解决javascript代码实例教程-Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。