formidable实现文件上传
前端必须使用post 和enctype=“mutilpart/form-data”
1、在跟目录下创建一个临时文件夹,用来存储临时文件
2、把临时的文件移动到最终的目录
使用:
(1)下载
npm i formidable
(2)引入
不用app.use
const formidable=require("formidable")
(3)创建表单对象
let form=formidable({
uploadDir:"./tempdir",//文件临时上传路径
})
(4)将表单对象里的信息进行解析
form.parse(req,(err,fields,files)=>{
})
(5)将临时文件放到最终目录中
读文件,将文件内容写入新文件
//解析传过来的内容 form.parse((错误参数,其他信息,文件信息)=>{})
form.parse(req,(err,fields,files)=>{
// console.log(fields);//{ username: 'zs', password: '123' }
// console.log(files);
let oldbuf=fs.readFileSync(path.join(__dirname,files.touxiang.path))
fs.writeFileSync(path.join(__dirname,"uploads",files.touxiang.name),oldbuf)
res.send("上传成功")
/*
{
"touxiang": {
"size": 15086,
"path": "uploads\\upload_19bdd6641d01f4bcae015568f2d36877",
"name": "favicon.ico",
"type": "image/x-icon",
"mtime": "2021-01-08T08:04:17.388Z"
}
}
*/
})
代码实例
uploadAvatar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>upload avatar</title>
<style>
input{
margin-top: 5px;
outline: none;
}
</style>
</head>
<body>
<form action="http://localhost:3000/uploadAvatar" method="post" enctype="multipart/form-data">
账号:<input type="text" placeholder="请输入账号" name="username" autocomplete="off"><br>
密码:<input type="password" placeholder="请输入密码" name="password" autocomplete="off"><br>
<input type="file" name="avatar"><br>
<input type="submit">
</form>
</body>
</html>
uploadAvatar.js
const express = require('express');
const fs = require('fs');
const path = require('path');
let app = express()
const formidable = require("formidable")
app.post("/uploadAvatar", (req, res) => {
// 生成一个表单对象
let form = formidable({
uploadDir: "./tempdir" // 文件临时上传目录
})
// 解析传过来的内容
form.parse(req, (err, fields, files) => {
// console.log(fields);// { username: 'jiaxin', password: '123' }
// console.log(files.avatar.path);
/*
avatar: File {
_events: [Object: null prototype] {},
_eventsCount: 0,
_maxListeners: undefined,
size: 21312,
path: 'tempdir\\upload_1e5ee1a5ecacc6855615fa7b2dd33776',
name: 'jiaxin.jpg',
type: 'image/jpeg',
hash: null,
lastModifiedDate: 2021-01-08T11:26:06.713Z,
}
*/
let oldBuf = fs.readFileSync(path.join(__dirname, files.avatar.path))
fs.writeFileSync(path.join(__dirname, "uploads", files.avatar.name), oldBuf);
res.send("Upload Successfully!")
})
})
app.listen(3000, () => {
console.log(`Port 3000 is listening...`);
})