微信小程序FormData传递Array解决方案

1,823 阅读1分钟

后端要用FormData传递数据, 这H5页面完全OK. 但微信小程序没有FormData.我们可以用Obj代替FormData来传递, 但当传递数组时, 由于Key一样, 这里就出现问题了, 只能传数据最后一个元素. 看小程序官网wx.request的Data描述:

--------------官网 start-----------------

data 参数说明 最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String 。转换规则如下: 对于 GET 方法的数据,会将数据转换成 query string(encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...) 对于 POST 方法且 header['content-type'] 为 application/json 的数据,会对数据进行 JSON 序列化 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据,会将数据转换成 query string (encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)

--------------官网 end -----------------

可以把要传递数据转换为query string. 我这里用递归的方式来转换, 代码如下:

const doParams = (data, params, prefix) => {
    if (!params) {
        return;
    }
    data = data || '';
    prefix = prefix || '';

    if ('[object Object]' == Object.prototype.toString.call(params)) {
        for (let objName in params) {
            if (null == params[objName] || undefined == params[objName] || 'createTime' == objName || 'updateTime' == objName) {
                continue;
            }
            if (typeof params[objName] != 'object') {
                let tmpObjName = parseInt(objName);
                if (isNaN(tmpObjName)) {
                    data += '&' + encodeURIComponent(prefix + (prefix ? '.' : '') + objName) + '=' + encodeURIComponent(params[objName]);
                } else {
                    data += '&' + encodeURIComponent(prefix + (prefix && 0 <= prefix.indexOf('.') ? '[' + objName + ']' : '')) + '=' + encodeURIComponent(params[objName]);
                }
            } else {
                let tmpObjName = parseInt(objName);
                if (isNaN(tmpObjName)) {
                    data += '&' + doParams('', params[objName], prefix + (prefix ? '.' : '') + objName);
                } else {
                    data += '&' + doParams('', params[objName], prefix + (prefix ? '[' + objName + ']' : ''));
                }
            }
        }
    } else if ('[object Array]' == Object.prototype.toString.call(params)) {
        for (let i = 0; i < params.length; i++) {
            if (!params[i]) {
                continue;
            }

            if (typeof params[i] != 'object') {
                data += '&' + encodeURIComponent(prefix + (prefix && 0 <= prefix.indexOf('.') ? '[' + i + ']' : '')) + '=' + encodeURIComponent(params[i]);
            } else {
                data += '&' + doParams('', params[i], prefix + (prefix ? '[' + i + ']' : ''))
            }
        }
    } else {
        data += '&' + encodeURIComponent(prefix) + '=' + encodeURIComponent(params);
    }

    if(data.indexOf('&') == 0) {
        data = data.substring(1, data.length);
    }

    return data;
};

为了使用上面方法, 这里做一个示例, params为传递给后台的参数

let queryStr = doParams('', params);
let header = {'content-type': 'application/x-www-form-urlencoded'};
wx.request({
    method: 'POST',
    url, //后端URL,
    data: queryStr || '',
    header,
    success: (res) => {
        
    },
    fail: (data) => {
        
    },
    complete: () => {
        
    }
});