基于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')
})