美文网首页
转换formdata参数格式

转换formdata参数格式

作者: ITtian | 来源:发表于2017-04-11 20:36 被阅读2616次

    在formdata中传递复杂参数时,很头疼,期望是一个样子,结果到了后台又是另一个样子,介绍几个基本的formdata格式

    传递一个普通的对象obj:{name:'testname',age:'testage'}
    需要写成这个样子
    ‘obj[name]’:'testname'
    ‘obj[age]’:'testage'
    
    传递一个数组arr:['name','age','sex']
    需要写成这个样子
    'arr[]':'name'
    'arr[]':'age'
    'arr[]':'sex'
    

    此时有这样一个结构,怎么传,一个个写出来,想死的心都有了,而且还会涉及到文件的异步上传(不然不会用formdata),所以找了个方法,总结一下:数组会加上[],对象会写成这样obj[property]

    var params = {
            name:'testname',
            obj:{
                innername:'innername',
                innerage:23,
                inneraddress:[
                    {
                        city:'shanghai',
                        area:'pudong'
                    },
                    {
                        city:'jiangsu',
                        area:'nanjing'
                    },
                ]
            }
        }
    
    var objectToFormData =function(obj, form, namespace) {
          var fd = form || new FormData();
          var formKey;
          if(obj instanceof Array){
            for(var item of obj ){
              if(typeof item === 'object' && !(item instanceof File)){
                this.objectToFormData(item, fd, namespace+'[]');
              }else{
                // 若是数组则在关键字后面加上[]
                fd.append(namespace+'[]',item)
              }
    
            }
          }else{
            for(var property in obj) {
              if(obj.hasOwnProperty(property) && obj[property]) {
    
                if(namespace) {
                  // 若是对象,则这样
                  formKey = namespace + '[' + property + ']';
                } else {
                  formKey = property;
                }
    
                // if the property is an object, but not a File,
                // use recursivity.
                if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
                    // 此处将formKey递归下去很重要,因为数据结构会出现嵌套的情况
                    this.objectToFormData(obj[property], fd, formKey);
                } else {
    
                  // if it's a string or a File object
                  fd.append(formKey, obj[property]);
                }
    
              }
            }
          }
          return fd;
    
        };
    

    测试一些,解析出来的数据结构传到后台和我们预期的结果一样:

    [keys:]
    name 
    obj[innername] 
    obj[innerage] 
    obj[inneraddress][][city] 
    obj[inneraddress][][area] 
    obj[inneraddress][][city] 
    obj[inneraddress][][area] 
    [values]:
    testname 
    innername 
    23 
    shanghai 
    pudong 
    jiangsu 
    nanjing
    

    相关文章

      网友评论

          本文标题:转换formdata参数格式

          本文链接:https://www.haomeiwen.com/subject/zlnuattx.html