用 formidable 上传文件

在这里插入图片描述

文件上传至服务器的方式有多种,下面要介绍的 formidable 是其中之一

Web 端

  • 在前台Web端提交文件上传请求的方式可以用表单的方式实现
  • 上传文件至服务器 表单必须带上enctype属性"
  • 上传方式 POST
	<h5>formidable 文件上传 /reg</h5>
    <form action="/reg" method="POST" enctype="multipart/form-data">
        <input type="file" name="pho"><br>
        <input type="submit" value="文件上传">
    </form>

Node 服务端

  • $ npm install formidable npm 安装 formidable 模块 (安装后的文件在node_modules文件夹中)
  • require(“formidable”)  引入模块
  • 使用 express 搭建服务器(express还不会基本使用的话可以来侃侃 express快速使用
	const formidable = require("formidable");
	const fs = require("fs");
	const path = require("path")
	const express = require("express");
	const app = express();
	
	app.use("/", express.static("./directorys"));
	app.post("/reg", (req, res) => {
	    let form = new formidable.IncomingForm();
	    form.uploadDir = "./directorys/pho";
	    // 执行回调函数,请求则全部就收完毕
	    form.parse(req, (err, fields, files) => {
	        // console.log(fields);    // 所有的文本域、单选框都在 fields 对象中
	        console.log(files);     // 所有的文件域都在 files 中
	        let time = new Date().getTime();
	        let numRan = parseInt(Math.random() * 89999 + 10000);
	        let extname = path.extname(files.pho.name);
	        // 原始文件名
	        let oldName = __dirname + "/" +  files.pho.path;
	        // 新文件名
	        let newName = __dirname + "/directorys/pho/" + time + numRan + extname;
	        console.log(oldName,newName);
	        // 改名(剪切)
	        fs.rename(oldName,newName,err =>  res.end("改名完成!"));
	    });
	});
	
	app.listen(3000);

初始文件夹
在这里插入图片描述
终端
在这里插入图片描述
上传后文件夹
在这里插入图片描述

发布了40 篇原创文章 · 获赞 31 · 访问量 2761

猜你喜欢

转载自blog.csdn.net/CodingmanNAN/article/details/105006862
今日推荐