|
|
|
步骤 2 : 模仿和排错 步骤 3 : 准备项目目录 步骤 4 : 安装模块 步骤 5 : 创建 package.json 目录 步骤 6 : upload.html 步骤 7 : app.js 步骤 8 : 运行并测试
老规矩，先下载右上角的可运行项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。
用如下命令运行： node app.js 然后访问测试页面： http://127.0.0.1:8088/upload.html 选择文件，然后提交，即可看到如图所示上传图片的效果
在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。
模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码，来定位问题所在。 采用这种方式，学习有效果，排错有效率，可以较为明显地提升学习速度，跨过学习路上的各个槛。 推荐使用diffmerge软件，进行文件夹比较。把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。 这个软件很牛逼的，可以知道文件夹里哪两个文件不对，并且很明显地标记出来 这里提供了绿色安装和使用教程：diffmerge 下载和使用教程
还是在如个目录下开始项目：
e:\project\nodejs
分别执行如下两个命令安装模块
npm install express npm install multer
执行如下命令：
npm init 然后一直回车就行了
首先创建 public 目录，然后在下面新建一个 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公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2024-08-01
关于express multer 运行报错
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2021-09-28
关于显示乱码问题
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-12-07
app.js修改好了
2020-10-06
fs.exists和fs.mkdir的问题
2020-01-31
一直报错，这是怎么回事啊
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 10 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||
