formidable模块上传图片的简单方法

formidable模块

1.作用：

​ formidable模块实现了上传和编码图片和视频。它支持GB级上传数据处理，支持多种客户端数据提交

2.使用步骤

​ 一：下载formidable模块

​ npm init -y

​ npm install formidable

​ 二：引入formidable

var http = require("http");
var fs = require("fs");
var url = require("url");
var formidable = require("formidable");

​ 三：实例化 formidable，并且引用IncomingForm方法

​

let from = new formidable.IncomingForm();//创建一个form表单对象
//form.uploadDir:设置上传文件存放的文件夹，默认为系统的临时文件夹
from.uploadDir = path.resolve(__dirname,'../upload');

​ 四：使用parse方法

​ form里面的parse方法解析node.js中request请求中包含的form表单提交的数据，回调函数里面会有我们在前端提交的字段（fileds），以及图片的详细信息（files）。
返回的字段是一个对象，如果想保存到文档里面，需要解析成字符串。

//fields:对象的其他信息    files：图片信息
from.parse(request,(error,fields,files)=>{});
//打印出来的files是一个对象，里面有一个属性photo,photo也是一个对象，里面有图片的详细信息
console.log(files);
//获取到图片的详细信息
let fileObj = files['photo'];
//获取图片的后缀名
let extname = path.extname(fileObj.name);
//重新定义图片的名字，这里采用time-stamp模块，为了保证图片的名字不会重复
let fileName = timeStamp('YYMMDDHHmmssms') + extname;
//定义图片的新路径
let newName = path.resolve(__dirname,'../upload') + '\\' + fileName;
//获取图片的老路径
let oldName = fileObj.path;
//使用fs模块的rename方法，改变上传文件的存放位置和文件名
fs.rename(oldName,newName,回调函数);
               

简单的一个小实例

<div id="app">
        <form action="http://127.0.0.1:3000/admin/article/insert" method="POST" enctype="multipart/form-data">
            <div><label>标题 ： <input type="text" name="title" /></label></div>
            <div>
                栏目 ： 
                <select name="column">
                    <%doc.forEach(item=>{%>
                        <option><%=item.title%></option>
                    <%})%>
                </select>
            </div>
            <div><label>简介 ： <input type="text" name="intro" /></label></div>
            <div>
                <label>内容 ： <textarea name="content"></textarea></label>
            </div>
            <div><label>图片 ： <input type="file" name="photo" /></label></div>
            <div><label>作者 ： <input type="text" name="author" /></label></div>
            <div><input class="sub" type="submit" value="添加栏目" /></div>
        </form>
    </div>

注意了呀，我只是粘贴上传图片的那一部分代码，其他的模块引入呀，定义路由呀，还有在入口文件的引入呀都没有展示

route.post("/insert",(request,response)=>{
    let from = new formidable.IncomingForm()
    from.uploadDir = path.resolve(__dirname,'../upload')
    from.parse(request,(error,fields,files)=>{
        //文件信息
        // console.log(files);
        //除了文件以外的信息
        // console.log(fields);
        if (error){
            response.send('添加失败');
        }else{
            let fileObj = files['photo'];
            let extname = path.extname(fileObj.name);
            let fileName = timeStamp('YYMMDDHHmmssms') + extname;
            let newName = path.resolve(__dirname,'../upload') + '\\' + fileName;
            let oldName = fileObj.path;
            fs.rename(oldName,newName,(err)=>{
                if (err){
                    response.send('更改失败');
                }else{
                    fields.photo = fileName;
                    fields.timer = timeStamp("YYYY年MM月DD日HH点mm分ss秒");
                    article.create(fields,error=>{
                        if (error){
                            response.send("<script>alert('添加失败');location.href='http://127.0.0.1:3000/admin/article/index'</script>")
                        }else{
                            response.send("<script>alert('添加成功');location.href='http://127.0.0.1:3000/admin/article/index'</script>")
                        }
                    })
                }
            })
        }
    })
   
})