formidable处理上传的文件或图片

formidable处理上传的文件或图片

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

1 下载并应用包

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

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

2 创建基本的表单结构

 

            
            

                

                    
姓名：
                    

                        
                    
                
                

                    
性别：
                    

                        
                        男
                        
                        女
                    
                
                

                    
头像：
                    

                        
                        
                    
                
                

                    

                    

                        
                    
                
            
        

//发送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))
        }
    });