标签：mode   lis   def   formdata   enc   img   cto   cti   res   

FormData

js中自带的构造函数对象

使用

客户端

const btn = document.getElementById(‘btn‘);
const form = document.getElementById(‘form‘)
btn.onclick = function () {  
  const formData = new FormData(form)
  console.log(formData);
  let xhr = new XMLHttpRequest()
  xhr.open(‘post‘,‘http://localhost:3000‘)
  xhr.send(formData)
  xhr.onload=function(){
    if(xhr.status==200){
      console.log(xhr.responseText);
    }
  }
}

服务端

安装导入formidable对象

const formidable = require(‘formidable‘)
app.post(‘/‘,(req,res)=>{
  //创建formidable表单解析对象
  const form = new formidable.IncomingForm()
  //解析客户端传递过来的FormData对象
  form.parse(req,(err,fields,files)=>{
    res.send(fields)
  })
})

方法

get(‘key‘)获取表单对象属性的值

set(‘key‘,‘value‘)设置表单对象的值

delate(‘key‘)删除表单对象中的属性的值

append(‘key‘,‘value‘)追加表单的值

客户端

const formData = new FormData(form)
formData.set(‘age‘,18)
formData.set(‘sex‘,‘mail‘)
formData.append(‘like‘,‘aa‘)
console.log(formData.get(‘username‘));
formData.delete(‘sex‘)

二进制上传

使用FormData实例的append方法

xhr.upload对象中存储上传的所有事件

通过xhr.upload.onprogress的事件对象event获取total总进度以及loaded已加载进度

客户端

    const form = document.getElementById(‘form‘)
    const file = document.getElementById(‘file‘)
    const btn = document.getElementById(‘btn‘)
    const xhr = new XMLHttpRequest()
    let formData = new FormData(form)
    file.addEventListener(‘change‘,function () {  
      xhr.upload.onprogress = function (event) {  
        let progress = (event.loaded/event.total)*100 +‘%‘
        console.log(progress);
      }
      formData.append(‘file‘,this.files[0])
    })
    btn.onclick = function () {  
      xhr.open(‘post‘,‘http://localhost:3000‘)
      xhr.send(formData)
      xhr.onload = function () {  
        const data = JSON.parse(xhr.responseText) 
        //将文件插入页面中
        document.querySelector(‘div‘).innerHTML = `<img src="${data.file[1]}" >`
      }
    }

服务端

const express = require(‘express‘)
const path = require(‘path‘)
const formidable = require(‘formidable‘)
const app= express()
app.post(‘/‘,(req,res)=>{
  //创建formidable表单解析对象
  const form = new formidable.IncomingForm()
  //设置客户端传递过来的路径,并设置
  form.uploadDir = path.join(__dirname,‘../‘,‘public‘,‘uploads‘)
  //解析客户端传递过来的FormData对象，并保留文件后缀名
  form.keepExtensions = true;
  form.parse(req,(err,fields,files)=>{
    //files.file表示客户端传递过来的服务器的路径地址
    res.send({file:files.file.path.split(‘public‘)})
  })
})
app.listen(3000)

fromData

标签：mode   lis   def   formdata   enc   img   cto   cti   res   

原文地址：https://www.cnblogs.com/coderllr/p/13926000.html