how2j.cn

下载区
文件名 文件大小
nodejs.rar 933k
使用站长秘制下载工具
步骤 1 : 先运行,看到效果,再学习   
步骤 2 : 模仿和排错   
步骤 3 : 准备项目目录   
步骤 4 : 安装模块   
步骤 5 : 创建 package.json 目录   
步骤 6 : upload.html   
步骤 7 : app.js   
步骤 8 : 运行并测试   

步骤 1 :

先运行,看到效果,再学习

edit
老规矩,先下载右上角的可运行项目,配置运行起来,确认可用之后,再学习做了哪些步骤以达到这样的效果。
用如下命令运行:

node app.js

然后访问测试页面:

http://127.0.0.1:8088/upload.html

选择文件,然后提交,即可看到如图所示上传图片的效果
先运行,看到效果,再学习
在确保可运行项目能够正确无误地运行之后,再严格照着教程的步骤,对代码模仿一遍。
模仿过程难免代码有出入,导致无法得到期望的运行结果,此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码,来定位问题所在。
采用这种方式,学习有效果,排错有效率,可以较为明显地提升学习速度,跨过学习路上的各个槛。

推荐使用diffmerge软件,进行文件夹比较。把你自己做的项目文件夹,和我的可运行项目文件夹进行比较。
这个软件很牛逼的,可以知道文件夹里哪两个文件不对,并且很明显地标记出来
这里提供了绿色安装和使用教程:diffmerge 下载和使用教程
步骤 3 :

准备项目目录

edit
还是在如个目录下开始项目:

e:\project\nodejs
准备项目目录
分别执行如下两个命令安装模块

npm install express


npm install multer
安装模块
步骤 5 :

创建 package.json 目录

edit
执行如下命令:

npm init

然后一直回车就行了
创建 package.json 目录
首先创建 public 目录,然后在下面新建一个 upload.html 文件
upload.html
<!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <form action="uploadPhoto" method="post" enctype="multipart/form-data"> 上传图片 : <input type="file" name="image" accept="image/*" /> <br> <input type="submit" value="上传"> </form>
<!DOCTYPE html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<form action="uploadPhoto" method="post" enctype="multipart/form-data">
  上传图片 : <input type="file" name="image" accept="image/*" /> <br>
  <input type="submit" value="上传">
</form>
创建 app.js,其作用就是进行上传文件的处理。
注释很详细,直接看注释就好啦
var express = require('express'); var path = require('path') var fs = require("fs"); var multer = require('multer'); var app = express(); //指定静态文件位置 app.use(express.static(path.join(__dirname, 'public'))) //上传之后放在工作目录下的 tmp 目录下。 上传的时候上传控件的name 必须是 image app.use(multer({ dest: path.join(__dirname, 'tmp') }).array('image')); //获取后缀名 function getExtName(fileName){ var index1=fileName.lastIndexOf("."); var index2=fileName.length; var extName=fileName.substring(index1+1,index2); return extName; } app.post('/uploadPhoto', function (req, res) { //获取上传图片的后缀名 var extName = getExtName(req.files[0].originalname); //随机数 var rundomNumber = Math.ceil(Math.random()*10000000); //以随机数作为文件名 var randomFileName = rundomNumber + "."+extName; //创建图片目录 var imgFolder = __dirname + "/public/img/"; if(!fs.exists(imgFolder)) fs.mkdir(imgFolder); //图片路径 var imgFile = __dirname + "/public/img/" + randomFileName; //上传临时文件的路径 var uploadedTempFilePath = req.files[0].path; //读取临时文件 fs.readFile( uploadedTempFilePath, function (err, data) { //读取成功之后,复制到图片路径 fs.writeFile(imgFile, data, function (err) { //写成功之后,返回 img元素显示上传之后的图片 res.writeHead(200, {'Content-Type': 'text/html'}); res.end("<img src='img/"+randomFileName+"'/>"); }); }); }) var server = app.listen(8088);

node app.js

然后访问测试页面:

http://127.0.0.1:8088/upload.html
运行并测试


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2019-06-01 关于站长 代码异常的说明,可能是最新版本有改动
yancy_扬希



NodeJs 废弃了 exists 并建议使用 access 或者 existsSync。 mkdir 需要两个参数。 已修改代码在 代码 页。 NodeJs 资料在: http://nodejs.cn/api/fs.html#fs_fs_mkdir_path_options_callback http://nodejs.cn/api/fs.html
var express = require('express');
var path = require('path')
var fs = require("fs");
var multer  = require('multer');
  
var app = express();
//指定静态文件位置
app.use(express.static(path.join(__dirname, 'public')))
//上传之后放在工作目录下的 tmp 目录下。 上传的时候上传控件的name 必须是  image
app.use(multer({ dest: path.join(__dirname, 'tmp') }).array('image'));
  
//获取后缀名
function getExtName(fileName){
    var index1=fileName.lastIndexOf(".");
    var index2=fileName.length;
    var extName=fileName.substring(index1+1,index2);
    return extName;
}
  
app.post('/uploadPhoto', function (req, res) {
   //获取上传图片的后缀名
   var extName = getExtName(req.files[0].originalname);
     
   //随机数
   var rundomNumber = Math.ceil(Math.random()*10000000);
   //以随机数作为文件名
   var randomFileName =  rundomNumber + "."+extName;
     
   //创建图片目录
   var imgFolder = __dirname + "/public/img/";
   if(!fs.existsSync(imgFolder))
       fs.mkdir(imgFolder,{ recursive: true }, (err) => {
  if (err) throw err;});
     
   //图片路径
   var imgFile = __dirname + "/public/img/" + randomFileName;
     
   //上传临时文件的路径
   var uploadedTempFilePath = req.files[0].path;
     
   //读取临时文件
   fs.readFile( uploadedTempFilePath, function (err, data) {
       //读取成功之后,复制到图片路径
        fs.writeFile(imgFile, data, function (err) {
            //写成功之后,返回 img元素显示上传之后的图片
              res.writeHead(200, {'Content-Type': 'text/html'});
              res.end("<img src='img/"+randomFileName+"'/>");
       });
   });
})
   
var server = app.listen(8088);

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-05-07 关于!fs.exists的问题
genglong
fs.exists() 已废弃,但 fs.existsSync() 不是废弃的。 fs.exists() 的 callback 参数接受与其他 Node.js 回调不一致的参数。 fs.existsSync() 不使用回调。 出处:http://nodejs.cn/api/fs.html#fs_fs_exists_path_callback







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2019-03-22 关于报callback must be a function和乱码的解决方法
2019-03-09 这代码有毒啊...搞了两天。。。。
2019-03-09 一直报错,代码有问题啊
2018-08-26 站长的代码好像有错误
2018-08-14 关于upload.html乱码




提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-node.js-上传文件 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 1001964108
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图