首页 > 解决方案 > '+' 字符在 HttpParams angular 6 中转换为空格

问题描述

我有一个 JSON 对象并使用 HttpParams 传递它,但它会将 + 转换为空间并发送到后端。我已经尝试了所有可能的方法,但没有人为 JSONObject 字符串解决它。

this.updateUser({"name":"ABC","mobile": "+911234567890","text":"1 + 2 = 3"});

public updateUser(myObj) {

    const body = new HttpParams().set('user_object', JSON.stringify(myObj));
    return this.http.post(url, body, {
      headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8')
    });
  }

当我在 Network 中检查包含 + 字符的对象时,它会自动转换为空格。

标签: jsonangulartypescriptencoding

解决方案


这是 HttpParams 的一个问题。a参数+值转换为 a 。我有一个类似的问题,其中我有一个 POST 请求,它接受 Base64 编码字符串形式的文件。该文件的 Base64 转换可以包含一个+被转换为. 我在我的项目中实现了一个 CustomURLEncoder 来处理相同的问题。以下是供您参考的片段:

import {HttpParameterCodec} from '@angular/common/http'

export class CustomURLEncoder implements HttpParameterCodec {
    encodeKey(key: string): string {
        return encodeURIComponent(key); 
    }
    encodeValue(key: string): string { 
        return encodeURIComponent(key); 
    }
    decodeKey(key: string): string { 
        return decodeURIComponent(key); 
     }
    decodeValue(key: string) {
        return decodeURIComponent(key); 
     }
}

您可以将编码器与 HttpParams 一起使用,如下所示:

import {CustomURLEncoder} from './urlencoder.component';
import {HttpParams, HttpHeaders, HttpClient} from '@angular/common/http';

export class ApiService {
    constructor(private httpClient: HttpClient){}

    base64 = "Encoded+Base64+File+Data" //String with '+'
    const fileDetails = new HttpParams({encoder: new CustomURLEncoder() })
        .set('filename','CustomEncodedFile.xlsx')
        .set('filedata',base64);

    return this.httpClient.post(url, fileDetails, {
        headers: new HttpHeaders().set('Content-Type', 'application/x-www- 
        form-urlencoded;charset=utf-8')
    });
}

推荐阅读