基于express和formidable的文件上传
前端html
知识点:文件上传选择form的encType=”‘multipart/form-data”方式;
此知识点可参考:https://www.v5w.com/iot/579.html
创建upload.html文件,具体实现代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <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> </body> </html>
后端express
实现代码如下:
const express = require('express') const path = require('path') const formidable = require('formidable') const fs = require('fs') const { md5Code } = require('v5w-utils') const app = express() app.use('/public', express.static(path.join(__dirname, 'public'))) app.use(express.urlencoded({ extended: false })) app.get('/', function (req, res) { res.sendFile(path.join(__dirname, 'upload.html')) }) app.post('/upload', function (req, res) { let form = new formidable.IncomingForm() form.parse(req, (err, files, file) => { if (err) return res.send('post error!') //1.将post数据保存到文件夹 let read = fs.createReadStream(file.userImg.path) let file_name = md5Code(file.userImg.name) let write = fs.createWriteStream('./public/' + file_name + '.jpg') read.pipe(write); // 2. 显示图片 res.send(`<img src="/public/${file_name}.jpg" width="500">`) }) }) app.listen(3000, function () { console.log('server is running') })
