Node+express框架图片上传

1.创建表单提交upload.html文件

<form action='/upload' method='post' enctype='multipart/form-data'>
    头像：<input type='file' name='userImg'/><br/>
    <input type='submit' value='上传头像'/>
    <!-- 
    使用file上传图片的注意事项：
        1. method上传方式必须是post
        2. enctype='multipart/form-data'
    -->
</form>

2.创建处理文件upload.js

// 引入express
let express=require('express');
let app=new express();
// 引入body-parser中间件
let bodyParser=require('body-parser');
// 引入 formidable中间件
let formidable=require('formidable');
// 文件操作
let fs=require('fs');
let path=require('path');

// 处理post数据的提交
app.use(bodyParser.urlencoded({extended:false})); 
// 配置静态资源路径
app.use(express.static(path.join(__dirname,'upload')));

// 路由
// 访问 / ，跳转到upload.html
app.get('/',(req,res)=>{
    res.sendFile(__dirname+'/3.upload.html');
})

// 处理post图片上传上来的数据
app.post('/upload',(req,res)=>{
    // 图片上传操作
    let form=new formidable.IncomingForm();
    form.parse(req,(err,files,file)=>{
        // console.log(files);
        // console.log(file);
        /* 1.上传[将图片从本地，上传到服务器]
        获取文件所在的位置 - 读取的管道流 - 管道流写的方式写进去 - 管道流
        */
        let read=fs.createReadStream(file.userImg.path);
        // 写入的时候，文件夹的名称如果不存在，则会写入失败；需要手动创建
        let write=fs.createWriteStream('./upload/'+file.userImg.name);
        read.pipe(write); // pipe 管道传输

        // 2.把图片的路径写入到 user-info 表中，数据库的更新操作

        // 3. 上传完成之后查看图片
        res.send('<img src="./'+file.userImg.name+'" width="200">'); 
    })
})

// 设置端口
app.listen(3000);

Node+express框架图片上传

猜你喜欢