时间戳

首页 > 解决方案 > 使用 Angular 5 和 Express JS 在位置 0 的 JSON 中出现意外的标记 #

angular5 - 使用 Angular 5 和 Express JS 在位置 0 的 JSON 中出现意外的标记 #

问题描述

我正在开发一个 MEAN 堆栈应用程序

where My client is in Angular 5 and backend is in node and express js with mongo db as my storage.

I am trying to upload an image from one my Angular Page to my express js rest API which will finally upload the image in AWS cloud

Sample code for my Component is as below having two methods one onFileSelected which sets the selected file and the onUpload which invokes a service class method


private selectedFile:File=null;


onUpload(){
    this.productCategoryService.
    uploadProductCategoryImage(this.selectedFile).subscribe(
      data=>{console.log("Upload success---"+data)},
      err=>{console.log("Upload error ---"+err.message)});
}


onFileSelected(event){
    this.selectedFile=event.target.files[0];
    console.log("this.selectedFile---------"+this.selectedFile);
}

The service does a post call of rest service on express js.Code of my service class is as below


public uploadProductCategoryImage(selectedFile:File){
        const formData = new FormData();
        formData.append("userFile",selectedFile);
        return this.http.post<any>
        ('http://localhost:3000/datastore/api/aws/api/file',formData);       
}

My html page

<input type="file" (change)="onFileSelected($event)" name="userFile">
<button type="button" class="btn btn-success" (click)="onUpload()">
<span class="fa fa-upload"></span>Upload</button>

However when I post this data I get an error as below on the server side

SyntaxError: Unexpected token # in JSON at position 0
    at JSON.parse (<anonymous>)

我从浏览器中发现了一些东西。它显示了 BAD 请求。我不确定发生了什么。请提出建议。

一般------------ 请求 URL：http://localhost:3000/datastore/api/aws/api/file 请求方法：POST 状态码：400 错误请求远程地址：[::1 ]:3000 Referrer Policy: no-referrer-when-downgrade

响应标头------------ Access-Control-Allow-Origin: * Connection: keep-alive Content-Length: 1314 Content-Security-Policy: default-src 'self' Content-Type: text /html; charset=utf-8 日期：2018 年 6 月 22 日星期五 16:47:12 GMT X-Content-Type-Options: nosniff X-Powered-By: Express

请求标头-------- Accept: application/json Accept-Encoding: gzip, deflate, br Accept-Language: en-GB,en-US;q= 0.9,en;q=0.8 Connection: keep-alive Content-Length: 232378 Content-Type: application/json Host: localhost:3000 Origin: http://localhost:4200 Referer: http://localhost:4200/contactus 用户-代理：Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36 ------WebKitFormBoundaryAEgWhmyP5LdwDaEl Content-Disposition: form-data; 名称="用户文件"; filename="2018-06-04 20-23-28.png 截图" Content-Type: image/png

谢谢萨钦

标签： angular5

解决方案

在 Angular 5 中，Httpclient 使用 JSON 作为默认格式。所以你已经使用BLOB作为你的响应类型，比如

  getImage(imageUrl: string): Observable<Blob> {
    return this.httpClient.get(imageUrl, { responseType: 'blob' });
  }

检查此链接以供参考：https ://stackblitz.com/edit/angular-1yr75s?file=src%2Fapp%2Fimage.service.ts

推荐阅读