FormData

2020-02-09 本文已影响0人 zhchhhemmm

FormData对象

作用：
1 模拟HTML表单，相当于HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
2 异步上传二进制文件

注意：客户端接收普通post表单用的body-parser，但是它不能接收FormData传递的参数。要用formidable

代码：

<body>
    <form id='form'>
        <input type="text" name="userName">
        <input type="text" name="password">
        <input type="button" id="btn" value="submit">
    </form>

    <script>
        var btn = document.getElementById('btn')
        btn.onclick = ()=>{
            var form = document.getElementById('form')
            var formdata = new FormData(form)
            var xhr = new XMLHttpRequest()
            xhr.open('post','http://localhost:3000/formData')
            xhr.send(formdata)
            xhr.onload = ()=>{
                if(xhr.status == 200){
                    console.log(xhr.responseText);
                    
                }
            }
        }
    </script>
</body>

//服务器端：

var formidable = require('formidable')
app.post('/formData',function(req,res){
  let form = new formidable.IncomingForm()
  form.parse(req,(err,fields,files)=>{
    //fields保存的是普通的表单内容，files是文件上传的相关信息
    res.send(fields)
  })
})

FormData下的实例方法

        /*
            get(‘key’):获取表单对象属性的值
        */
       //获取name为userName的value值
        var names = formdata.get('userName')
        console.log(names);
       
        /*
            set('key','value'):设置表单中属性的值
        */
       //如果set的这个表单属性存在，则是替换原有值，如果不存在，则会创建这个属性
        formdata.set('password','wahahaha')

        /*
            delete()  删除表单中的属性值
        */
       /*
            append()  向表单属性中追加值
            使用场景：在创建formData对象时，我们可以不传递表单元素
            而是使用追加属性的方式完成post请求

            set和append的区别：
            在属性名称已经存在的情况下，set会覆盖之前的属性，而append会保留两个属性及其值
        */

FormData二进制文件上传

上传文件示例代码

服务器端：
app.post('/upload',(req,res)=>{
  let form = new formidable.IncomingForm()
  //设置客户端上传过来的文件的存储路径
  form.uploadDir = path.join(__dirname,'public','uploads')
  //保存文件后缀
  form.keepExtensions = true
  form.parse(req,(err,fields,files)=>{
    //fields保存的是普通的表单内容，files是文件上传的相关信息
    res.send('ok')
  })
})
客户端
<div id="uploadDiv">
        
        <input type="file" id="upload">
    </div>
    <script>
        var file = document.getElementById('upload')
        file.onchange = function(){
            var formData = new FormData()
            formData.append('attrName',this.files[0])
            var xhr = new XMLHttpRequest()
            xhr.open('post','http://localhost:3000/upload')
            xhr.send(formData)
            xhr.onload = function(){
                if(xhr.status == 200){
                    console.log(xhr.responseText);
                    
                }else{

                }
            }
        }
    </script>
</body>

上传进度展示

<div id="bar">
    <div id="programBar" ></div>
</div>

思路：
实时获取上传进度，改变内部那个div的width即可

 xhr.upload.onprogress = function(ev){
                var program =  ((ev.loaded/ev.total)*100).toFixed(2) + '%'
                bar.style.width = program
                bar.innerHTML = program
 }

图片上传即时预览

思路，让服务器端将图片地址作为响应数据传递的客户端，然后让客户端去显示图片

客户端
xhr.onload = function(){
               if(xhr.status == 200){
                   var pathJson  = JSON.parse(xhr.responseText)
                   var img = document.createElement('img')
                   img.src = pathJson.path
                   img.onload = function(){
                       var box = document.getElementById('img')
                       box.appendChild(img)
                   }
               }else{

               }
           }
服务器端
form.parse(req,(err,fields,files)=>{
   //fields保存的是普通的表单内容，files是文件上传的相关信息
   res.send(
     {
       path:files.attrName.path.split('public')[1]
     }
   )//上传过来的文件的存储路径

 })