轉換formdata參數格式

在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
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容