formidable处理上传的文件或图片

formidable处理POST方式提交的表单数据

1 下载并应用包

npm i formidable -S/-D //下载包

var formidable = require('formidable') //引用包

2 创建基本的表单结构

 <form action="/add" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="img" id="img1">
            <table class="table table-hover">
                <tr>
                    <td>姓名：</td>
                    <td>
                        <input type="text" name="name">
                    </td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <input id="nan" name="gender" value="男" type="radio">
                        <label for="nan">男</label>
                        <input name="gender" value="女" type="radio" id="nv">
                        <label for="nv">女</label>
                    </td>
                </tr>
                <tr>
                    <td>头像：</td>
                    <td>
                        <img src="" alt="" id="photo" width="100">
                        <input type="file" id="img">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" id="sub" value="新增">
                    </td>
                </tr>
            </table>
        </form>

//发送ajax请求
 // 我们希望用户一旦选择了文件就进行文件的上传操作：好处就是能够提高用户体验
    $('#img').on('change', function () {
        // 1.上传文件往往会使用FormData对象来收集文件数据
        var formdata = new FormData()
        // 2.获取文件数据
        var file = document.querySelector('#img').files[0]
        // 3. 将文件数据添加到formdata对象中，这个formdata对象可以直接做为数据传递
        formdata.append('img', file) //file
        formdata.append('username', 'jack') //fields
        console.log(formdata);
        // 发送异步请求，实现文件数据的上传
        // 当使用formdata+ajax实现文件上传的时候，必须添加两个属性设置
        $.ajax({
            type: 'post',
            url: '/fileUpload',
            data: formdata,
            dataType: 'json',
            processData: false, //告诉ajax不要处理数据，由formdata处理
            contentType: false, //告诉ajax不要对数据进行编码处理，由formdata处理
            success: function (result) {
                console.log(result)
                if (result.code == 200) {
                    // 实现预览
                    $("#photo").attr('src', '/images/' + result.myimg)
                }
            }
        })
    })

3 使用formidable处理随着请求传输过来的数据

 // 1.创建对象
    var form = new formidable.IncomingForm()
    // 2.设置编码：如果有普通键值对数据就最好设置
    form.encoding = 'utf-8'
    // 3.设置上传文件的存储目录
    form.uploadDir = __dirname +  '/images'
    // 4.设置是否保留文件的扩展名
    form.keepExtensions = true
    // 5.上传文件会执行parse函数
    // req:因为req中请求报文，而传递的数据都存储在请求报文中
    // 上传完毕后触调用回调函数，这个里面有三个参数
    // err：上传如果失败的错误信息
    // fields：数据传递成功普通的键值对存储对象
    // files：文件上传成功，存储着文件信息
    form.parse(req, function(err, fields, files) {
        if(err){
            var retValue= {
                code:100,
                msg:'上传失败'
            }
            res.end(JSON.stringify(retValue))
        }else{
            // basename:可以获取当前路径中的最后一个部分
            var filename = path.basename(files.img.path)
            var retValue = {
                code:200,
                msg:'上传成功',
                myimg:filename
            }
            res.end(JSON.stringify(retValue))
        }
    });