准备工作
## 首先要安装一个NodeJS
## 创建一个文件夹存放操作文件上传的代码
## 这里上传操作需要用到第三方包:multiparty
## 在创建的文件夹里黑窗安装 : npm install multiparty --save
开始书写代码
1.先生成项目的描述文件 package.json
:---------------------切换到项目根目录: 在黑窗中运行 npm init -y
2.把上传文件的html页面代码写好,直接上图:
<form action="/postload" enctype="multipart/form-data" method="post">
<input type="text" name="nickname"><br>
<input type="text" name="sex"><br>
<input type="file" name="upload1" multiple="multiple"><br>
<input type="file" name="upload2" multiple="multiple"><br>
<input type="submit" value="提交">
</form>
3.开始书写js代码
-----分为四大步骤:
------- *1.导入模块
------- *2.创建服务
------- *3.请求,处理,响应
------- *4.开启web 服务
1.导入模块
const http = require('http')
const fs = require('fs')
const path = require('path')
// 以下是第三方包需要导入的
const multiparty = require('multiparty');
const util = require('util');
// 这是获取时间的第三方包
const format = require('date-format');
2.创建服务
var server = http.createServer();
3.请求,处理,响应
这里需要发送两次请求:
server.on('request',function(req,res){
处理代码
})
1.让用户看到上传文件的页面
if(urlstr.includes('uploadPage.html')){
fs.readFile(path.join(__dirname,"html/uploadPage.html"),(err,data)=>{
if(err){
console.log(err);
}else{
res.setHeader('Content-Type','text/html;charset=utf-8')
res.end(data)
}
})
}
2.当用户点击提交按钮,跳到指定页面:/postload,完成文件上传
--------分为两步:
(1)创建一个文件夹
(2)使用第三方包multiparty的方法,进行文件上传
第三方包网址:https://www.npmjs.com/package/multiparty
else if(urlstr.includes('/postload') && req.method === 'POST'){
//创建一个名字叫做upload的文件夹,路径为:uploadDir
const uploadDir = path.join(__dirname,"upload")
const exists = fs.existsSync(uploadDir)
// 判断是否存在
if(!exists){
const err = fs.mkdirSync(uploadDir)
if(err){
console.log(err);
}else{
console.log('mkdir ok');
}
}else{
console.log('已经存在!!!');
}
//第三方包的方法
const form = new multiparty.Form({uploadDir});
form.parse(req, function(err, fields, files) {
// 文本域:fields
// 文件域:files
// Object.keys(data):将对象中的 key/value 变成一个数组可以遍历
Object.keys(fields).forEach(key=>{
console.log(`key is ${key}`);
console.log(`value is ${fields[key][0]}`);
})
Object.keys(files).forEach(key=>{
console.log(`key is ${key}`);
// console.log(files[key][0]);
// 获取文件的完整路径
const oldPath = files[key][0].path
//使用第三包format,用获取到的时间对文件重命名
const newPath = path.join(__dirname,"upload",`${format('yyyy-MM-dd-hh-mm-ss-SSS', new Date())}.txt`)
const err = fs.renameSync(oldPath, newPath)
if(err){
console.log(err);
}else{
console.log('rename ok');
}
})
res.writeHead(200, {'content-type': 'text/plain;charset=utf-8'});
res.write('received upload:\n\n');
res.end(util.inspect({fields: fields, files: files}));
});
return;
}else{
res.end('')
}
4.开启web 服务
server.listen(8899,'127.0.0.1',function(err){
if(err){
console.log(err);
}else{
console.log('start ok');
}
})
本文共用到两个第三方包:
multiparty 和format
使用方法:
1.安装:npm i xxx --save
2.导包:const xxx = require('xxx')
3.查看第三方包的文档,使用作者说的方法
本文用到有关文件操作的一些方法
1.文件操作一般需要用到2个模块:fs(文件操作)和path(获取路径)
2.获取文件路径:__dirname
3.拼接文件路径:path.join(__dirname,'html/index.html')
## 以下是用的都是同步的方法,(本文用的也是同步的方法,考虑到文件上传是异步操作,故再上传之前需要,将文件夹创建好)
4.读取文件路径:const content = fs.readFileSync(filePath)
5.创建文件夹:fs.mkdirSync(path[, options])
6.判断文件是否存在:fs.existsSync(path)
7.文件重命名:fs.renameSync(oldPath, newPath)@[TOC](这里写自定义目录标题)