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(8080);
3.访问测试
nodemon upload.js
这样就可以进行文件上传了,文件上传的时候是上传到服务器中,如果想要存在数据库中,只需要把文件的名称存在数据库中就可以了
原文地址:https://www.cnblogs.com/ranyihang/p/12692155.html
时间: 2024-10-16 15:42:00