form表单上传参数为什么为空,

  form表单上传参数为什么为空,

  本文主要介绍vue中formdata传递到后台时参数为空的问题。有很好的参考价值,希望对大家有所帮助。如有错误或不足之处,请不吝赐教。

  

目录

  当formData向后台传递值时,参数为空。使用formData时,传递的参数为null。FormData使用formData具体表单的操作API。

  

formdata传值给后台时参数为空

  在vue中使用formData时,参数值为空,因为axios被封装了两次,所以在传递表达式时会传递一个空的表单。

  Axios在重新封装时会影响原始表单提交或文件上传,所以可以使用原生请求。

  //list是一个对象数组

  export const or catelogue=(list)={

  设fd=新表单数据()

  for(var I=0;ilist.lengthi ) {

  console.log(列表[i])

  console . log(object . keys(list[I]))

  console . log(object . values(list[I]))

  fd.append(Object.keys(list[i]),Object.values(list[i]))

  console.log( -)

  }

  返回axios({

  方法: post ,

  网址:` sgcc/qa/catalogue `,

  数据:fd,

  标题:{ Content-Type : multipart/form-data }

  })

  }

  例如,输入是:

  控制台输出:

  实际传递的参数:

  

使用formData时候传递参数是个空值的情况

  关于在vue中使用axios,传递的参数是formData(上传文件,图片,文档等。)

  

formData用途

  1.将from表单元素的名称和值结合起来,实现表单数据的序列化。

  2.异步上传文件

  

使用formData

  1.创建一个空对象。

  var formData=new formData();

  //大多数情况下,数据都是用formData追加的,这是通过append() Api完成的。

  formData.append(键,值)

  //取出追加的值

  formData.get(键)

  //修改值

  formData.set(key,newVale)

  2.通过窗体初始化formData

  表单id=myForm

  pname:input type= text name= name value= Xiaolong /p

  page:input type= text name= age value= 23 /p

  pin type= button id= BTN value= add /p

  /表单

  通过将表单元素作为参数来初始化formData。

  var BTN=document . query selector(# BTN );

  btn.onclick=function(){

  //获取表单元素

  var form=document . query selector(# my form));

  //初始化表单

  var FormData=new FormData(form);

  //此时可以执行一个操作来获取或设置表单的值或者直接提交整个表单。

  console . log(formdata . get( name ));//小龙

  }

  

具体表单的操作API

  大部分都可以在mdn上找到。

  举个例子:

  获取表单数据或整个表单对应的键的数据。

  FormData.get(age)//获取一个以关键字为年龄的值

  FormData.getAll(age)//获取关键字为age的所有数据。

  在vue中使用formData时,因为axios是重新封装的,所以在交付表达式时会交付一个空表单。这是因为axios的重新封装会影响原始表单提交或文件上传。

  所以在使用二次包axios的时候需要设置一个参数。

  这个。$axios({

  方法: post ,

  Url:`您的请求地址`,

  Data: formD,//这是我的fromdata

  标题:{

  TransformRequest: [data=data]//这里是我设置的转换数据类型。

  }

  })

  以上个人经历,希望能给大家一个参考,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: