SyntaxError：带有Servlet的JSON在位置3 Angular2处的意外令牌<

Question

I am uploading a file in angular2 front end and receiving it in a Servlet . The file passes to the backend but in the browser I am getting an error in the browser console at the subscribe observable .

AppComponent

  fileChange(event) {
const fileList: FileList = event.target.files;
if (fileList.length > 0) {
  const file: File = fileList[0];
  const formData: FormData = new FormData();
  formData.append('uploadF', file, file.name);
  const headers = new Headers();
  /** No need to include Content-Type in Angular 4 */
   // headers.append('Content-Type', 'multipart/form-data');
  headers.append('Accept', 'text/html');
  const options = new RequestOptions({ headers: headers });
  // console.log('Reached here');
  this.http.post(`http://localhost:8080/ProjSecond/Uploader1`, formData, options)
     .map((res) => {console.log(res.json()); })
     .catch(error => Observable.throw(error))
    .subscribe(
      resp => console.log('success' + resp),
      error => console.log('error IS*&*&*&**' + error), // THIS LINE SHOWS ERROR
      () => console.log('Operation Completed')
    );

Servlet is :

protected void doPost(HttpServletRequest request, HttpServletResponse response)
       throws ServletException, IOException {
   response.setHeader("Access-Control-Allow-Origin", "*");
   String oName = null;
   //process only if its multipart content
   if(ServletFileUpload.isMultipartContent(request)){
       try {
           List<FileItem> multiparts = new ServletFileUpload(
                                    new DiskFileItemFactory()).parseRequest(request);

           for(FileItem item : multiparts){
               if(!item.isFormField()){
                   String name = new File(item.getName()).getName();
                   item.write( new File("E:\\uploads\\" + name));
                   System.out.println("filename: " + name);
                   oName = name ;
               }
           }
          //File uploaded successfully
          request.setAttribute("message", "File Uploaded Successfully");
          request.setAttribute("fileName" , oName);
          //response.sendRedirect("/result.jsp"); 
         /* RequestDispatcher requestDispatcher; 
          requestDispatcher = request.getRequestDispatcher("/result.jsp");
          requestDispatcher.forward(request, response);*/
          request.getRequestDispatcher("http://localhost:4200/").forward(request, response);

       } catch (Exception ex) {
          request.setAttribute("message", "File Upload Failed due to " + ex);
       }   

What's wrong in the code ? Thanks .

Answer 1

Well I figured it out . Angular always takes JSON as inputs from other applications(as per my research , please correct me if I am wrong). Hence all I had to do was provide the string data as JSON from my Servlet .