Content-Type为form-data,前端数据处理

编程知识 更新时间:2023-04-05 05:36:44

form-data格式一般是用来进行文件上传的。但后写的登录接口必须让入参以form-data格式传入

1、如果是使用的原生form写的,只需要在form标签上加上
**enctype=“multipart/form-data”**即可。

<form action="example" method="post" enctype="multipart/form-data">

2、因为使用的antd中的Form表单组件,还有一种方法就是将传入的数据,利用FormData转成FormData对象,请求就会自动转为form-data类型。不需要手动设置Content-type。
FormData的使用:

 let params = {name: 'superman', pws: '222222'}
 formData.append('user', params )

通过这种方法添加FormData参数user,并不会获取到真正的内容,返回的是userObjObject.prototype.toString.call(userObj)的值作为user字段的值
但FormData对象无法将批量转换成对应的形式,手动写一个方法实现:

function transObjFormData(obj, form, namespace) {
  const fd = form || new FormData();
  let formKey;
  
  for(var property in obj) {
      if(obj.hasOwnProperty(property)) {
        let key = Array.isArray(obj) ? '[]' : `[${property}]`;
        if(namespace) {
          formKey = namespace + key;
        } else {
          formKey = property;
        }
        // 如果是一个对象不是文件或字符串,就使用递归,继续遍历
        if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
          transObjFormData(obj[property], fd, formKey);
        } else {
          // 如果是一个字符串传或者文件对象,就直接添加
          fd.append(formKey, obj[property]);
        }
      }
    }
  return fd;
}

更多推荐

Content-Type为form-data,前端数据处理

本文发布于:2023-04-05 05:36:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/4838fd52548e987c6cca08f07f6b3ac4.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:数据处理   Type   Content   data   form

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!

  • 45046文章数
  • 14阅读数
  • 0评论数