FormData记录

2023-10-07 19:57:40

整体流程：前台——>nodejs——>后端接口

FormData

//创建对象
var formData = new FormData()
//向formData中添加数据(添加到formData末尾)
formData.append('a',1)
formData.append('a',2)
formData.append('b',3)
//读取formData中的数据(当formData中只有这一个键的时候，返回对应值，当这个键对应多个值，返回该键对应的第一个值)
formData.get('a')//1
formData.get('b')//3
//修改数据(当键名已存在就修改对应值，没有该键就在末尾添加这个键值对)
formData.set('a',4)
formData.set('c',5)
// 删除数据(根据键名删除，当多个值共用同一个键的时候会删掉这个键的所有键值对)
formData.delete('a')//此时获取键名为a的值时返回null
formData.delete('b')
//清空数据
var formData = new FormData()

type=“file”

所有文件类型的input都有一个默认属性：files。

var file = document.getElementsByTagName('input')[0]//获取第一个file型input节点
file.onchange = function(){
	console.log(file.files)
}

控制台结果

可选择多个文件的file的files属性值：

将file添加到formData

//单个文件添加方式
var file = document.getElementsByTagName('input')[0]//获取第一个file型input节点
formData.append('file',file.files[0])//键名为接口所需名字
//多个文件添加方式
for(var i = 0;i < file.files.length;i++){
	formData.append('file',file.files[i])
}//本来打算把文件信息放到数组里面，再把数组单个添加到formData里面，但是调用接口传formData的类型不是binary，而是[object file]，类型是不对的

调node接口

文件类型之外的参数拼到链接里面，data单独放封装好的FormData对象

axios({
      method:'post',
      url:`/index/draft?userId=${6}&context=${textarea.value}`,   
      data:imgFormData,//封装好的FormData对象
      headers: {
          'Content-Type': "multipart/form-data",
      },//修改请求头中的Content-Type，浏览器会根据Content-Type设置的形式读取文件，默认是application/www-url-encoded，如果不把Content-Type修改为multipart/form-data，浏览器会默认将数据以键值对形式读取，会调用接口失败
  })
  .then(data=>{
      
  })
  .catch(err=>{
      
  })

nodejs获取前台传来的formData

前台调用接口同时传参数和formData，本来以为获取发送的数据只是get对应req.query，post对应req.body，但是后来发现尽管是post请求，但是在前台调用node接口时拼到链接里面的参数要用req.query获得，前台传来的文件要通过request.files获得。
打印结果：

调用后端接口

let formData = new FormData()
 for(var a in req.files){
     formData.append('file',fs.createReadStream(req.files[a].path));//node接收前台传来的图片会把它放到本地的一个文件夹里面，这里的path就是前面对应的路径，在本机可以找到，给后端上传图片为什么只需要传图片，不用给图片的其他信息，搞不懂
 }
 axios({
     url:`/index/saveDrafts?userId=${userId}&context=${context}`,
     data:formData,
     method:'post',
     headers:formData.getHeaders()
 })
 .then(data=>{
     res.send({err:0})
 })
 .catch(err=>{
     res.send({ err })
     console.log(err)
 })

总结

上传文件我每次写都有问题，每次都找别人帮忙改，我太裂开了。他最近买了本图解HTTP，天天说话离不开这本书，说他看完了就给我让我看，说他要是在我这个时候看到这本书那他现在改bug都是分分钟的事，总之就是撺掇我看！！我麻了都。

码农公寓