使用NodeJS实现文件上传到自定义文件夹

准备工作

## 首先要安装一个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](这里写自定义目录标题)

猜你喜欢

转载自blog.csdn.net/yinQiaoJieDuPian/article/details/83212527
今日推荐