继续获取SyntaxError:JSON.parse中位置0的JSON中的意外标记�

时间:2018-01-10 21:42:19

标签: javascript node.js angular express

我正在尝试使用expressjs api发送jpeg图像。但我一直在低于错误。

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:3000/api/1.0/profile/avatar", ok: false, …}
error
:
error
:
SyntaxError: Unexpected token � in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:8100/build/vendor.js:48937:37) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660) at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4973:33) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581) at r.runTask (http://localhost:8100/build/polyfills.js:3:10834) at e.invokeTask [as invoke] (http://localhost:8100/build/polyfills.js:3:16794) at p (http://localhost:8100/build/polyfills.js:2:27648) at XMLHttpRequest.v (http://localhost:8100/build/polyfills.js:2:27893)
text
:
"����JFIF���   
( %!1!%3+...383,7(-.+↵↵↵+++++++++++++++-+++++++++++++++++++++++++++++++++++����"����7!1AQaq���"23�4BRr����#b���������?��N��:0b��[�ǽW_ݏ�g�ؚ��ez���Mgi�↵��r��Fw&":����Rfr�G��+�r��]^�~��]qD{��93\�6���/���3�u��� n��f~M5O�1ݽ]��T�umN�S�����ﶱ;���f.TN(�*��[@.܋V����P���\ν)���3?�#i�_L����},^�3��:�n�Ȼn&��K���������P��ʣ�z'*�j:X\������(��=S��M9Y�ݗ� �2q?�������^XF���^�i���V�G-'��↵ O�MWziNQ��8i�t�q����z3��.�/�ʯ�j���~�O|�$��/F�U���=S��[��LWĢ�m{�O-�A�k�t�9�DϞ�֭�[��r[�،=Q�3��� �Z�t�Q�I����~���[Ld4�j��x��n�V�5O(�;����>;^�;�=���7��3Nt��~��������LG��0
↵b�]=.����|�qt����67ZcL�gH�&��/r*�M1�D������{�T�Y�y� ժ��؝p�����nҏ�nt19O8�ǒ�.#E��:�
:ϏRu�}w�r����O����ܩ���L�����\�2z')�~K\m7���b+�ϹɌ���;8��|3�uU�7��T������>`�9�i�:��ň�TZҏ~�ͼ�o��|s�?��#�<G�Α=*���������F��}e��rz�h���]�������^M�8�N��˶5�-Ӏ~����9�11�O�[�mU������O-1����S-܋��nbc��1��p�|U��J����'*i7=��L�ҟ�E9:ۮmW�������<db#*�����$;L�k��x�������O�@d#p���"
__proto__
:
Object
headers
:
HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message
:
"Http failure during parsing for http://localhost:3000/api/1.0/profile/avatar"
name
:
"HttpErrorResponse"
ok
:
false
status
:
200
statusText
:
"OK"
url
:
"http://localhost:3000/api/1.0/profile/avatar"

以下是我的代码。我在这里要做的是,我从目录中获取一个图像,并在写入头后发送它。我不知道为什么我会收到此错误。知道怎么克服这个吗?

let imagepath = __dirname + '/../images/avatar.jpeg';
let image = fs.readFileSync(imagepath);
let mime = fileType(image).mime;

console.log(image);

response.writeHead(200, {'Content-Type': mime });
response.end(image, 'binary');

这是我的客户端代码的更新。

    let myHeaders = new HttpHeaders({
        'Content-Type': 'image/jpeg',
        'withCredentials': 'true',
        'Authorization': localStorage.getItem('token')
    });

    return this.http.get('http://localhost:3000/api/1.0/profile/avatar', { headers: myHeaders });

更新此问题。

所以我用以下

替换了this.http.get
return this.http.get('http://localhost:3000/api/1.0/profile/avatar', { headers: myHeaders, responseType: 'blob', }).map(blob => {
        let urlCreator = window.URL;
        return this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));
    });

返回的响应是base64。现在我尝试使用img标记渲染base64图像,但不知何故它不渲染。下面是我用于渲染的代码。

this.profileService.getUserAvatar().subscribe(avatar => {
            response[0]['image'] = 'data:image/jpeg;base64,' + btoa(avatar);
        }, error => {
            console.log(error);
        });

  this.profile = response; // this.profile works fine. when I console.log this.profile then is show property image which I use in template below to render.

这是html

<div *ngFor="let p of profile">
        <img [src]="p.image">
    </div>

0 个答案:

没有答案