'+'字符在HttpParams angular 6中转换为空格

Question

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

this.updateUser({"name":"ABC","mobile": "[phone]","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')
    });
  }

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

Answer 1

这是一个常见的问题。 URL使用+字符来分隔两个单词。为了在参数值中使用+字符，您需要在将参数值作为URL的一部分添加之前对其进行编码。 Javascript / TypeScript为特定目的提供encodeURI()函数。

URL编码将字符转换为可以通过Internet传输的格式。 [w3Schools Reference]

以下是解决此问题的方法：

let mobile = encodeURI("[phone]");
let text = encodeURI("1 + 2 = 3");
this.updateUser({"name":"ABC","mobile": mobile,"text":text});

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')
  });
}

要么

您可以在updateUser（）方法内编码：

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

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

要么

在发送到服务器之前使用正则表达式替换+：

let jsonData = JSON.stringify(myObj);
jsonData = jsonData.replace(/\+/gi, '%2B');

Answer 2

这是角度HttpParams的问题。参数值中的+将转换为。我有一个类似的问题，其中我有一个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')
    });
}