这里是文章模块栏目内容页
用axios把对象数组转变成formData对象的处理方法

很多时候,php后端接收http传递来的表单数据,数组的结构和前端js 的数组是有所区别的;

对象同样也是有区别的。php 后端 我们通常是接收 键值数组类型比较方便。

这里介绍前端发送数据时做一些处理,方便php后端接收。

var API = {
 /**
 当发送param = {
     name: { first: 'ss', last: 'aa'},
     images:[{url:'', name:''},{url:'', name:''}]
 }
 在php后端可以 通过 _POST['name']; $_POST['images'];
 获取到数据。
 */
    _getFormData: function (param) {
        var formData = new FormData();
        for (var p in param) {
            //处理 值为对象 时再循环一次 变成PHP格式数组
            var first = param[p] ;
           // console.log(p, typeof first )
            if (typeof first === 'object'){
                //发送 数组 例如 images:[{url:'', name:''}]
               if(first.length>0){
                    for (var j in first) {
                   
                        if (typeof first[j] === 'object') {
                            for (var k in first[j]) {
                                formData.append(p + '[' + j + '][' + k + ']', first[j][k] );
                            }
                        }else{
                            formData.append(p, first);
                        }
                    }
                }else{
                    // 发送对象为数组 例如 file:{ name:'', url:''}
                    for (var i in first) {
                        formData.append(p + '[' + i + ']', API._filter_value(first[i]));
                    }
                }
             
            }else{
                formData.append(p, API._filter_value(first));
            }
           
        }
        return formData;
    },
    // 把一维数组作为‘,’拼接的字符串
    _filter_value(value){
        if(typeof value === 'Array'){
            return value.join(',');
        }
        return value;
    },
    // 发送axios请求
    _axiosPost: function (url, param) {
        axios.defaults.withCredentials = true;
        return new Promise((resolve, reject) => {
            axios.post(url,
                API._getFormData(param)
            ).then((response) => {
                resolve(response.data);
            }).catch(ret => {
                reject(ret);
            })
        })
    },
    
}

好了本文内容全部结束,感谢你的阅读,希望能对你有所帮助。



更多栏目
相关内容