error: SyntaxError: Unexpected token . in JSON at position 0 at JSON.parse (<anonymous>) at XM-CodePudding

I'm facing this error when I upload a product from Angular with it's image to NestJs Server. The image get's successfully selected from input field, then is uploaded to server alongside the other properties, but also this error pops up. I don't know what it is. As you can see in the below screen shot, there is the uploaded product with image path,and also there's some error. I don't know which part/end generating this error.

Angular side code. From here the image is getting selected and uploaded alongside other properties

export class AdbooksComponent implements OnInit {
  AddbookForm = new FormGroup({
    bid: new FormControl(''),
    name: new FormControl(''),
    author: new FormControl(''),
    price: new FormControl(''),
    genres_name: new FormControl(''),
    coverimage: new FormControl(''),
  });
  constructor(
    private readonly apiService: ApiService,
    private readonly router: Router,
    private readonly http: HttpClient
  ) {}

  ngOnInit() {}
  async addall() {
    this.addfile();
    this.addbooks();
    this.AddbookForm.reset();
    // this.imagedata = '';
  }
  async addfile() {
    let formData = new FormData();
    formData.set(
      'file',
      this.AddbookForm.value.coverimage,
      this.AddbookForm.value.coverimage.name
    );
    this.http
      .post('http://localhost:3000/images/upload', formData)
      .subscribe((res) => {});
  }
  async addbooks() {
    (await this.apiService.addbooks(this.AddbookForm.value)).subscribe(
      (res) => {
        console.log(res);
      }
    );
  }

  async uploadimage(event: any) {
    this.AddbookForm.value.coverimage = event.target.files[0];
    console.log('file', this.AddbookForm.value.coverimage);
  }
}

NestJs File Upload Code with path mapping

@Controller('images')
export class ImagesController {
  static imageUrl: string;
  constructor(private readonly bookservice: BooksService) {}

  @Post('upload')
  @UseInterceptors(
    FileInterceptor('file', {
      storage: diskStorage({
        destination: './assets/',
        filename: (req, file, cb) => {
          const filename: string = Array(10)
            .fill(null)
            .map(() => Math.round(Math.random() * 16).toString(16))
            .join('');
          return cb(null, `${filename}${extname(file.originalname)}`);
        },
      }),
    }),
  )
  async uploadFile(@UploadedFile() file: Express.Multer.File, @Request() req) {
    console.log(file);
    return this.imageUrl(file);
  }

  private imageUrl(file: Express.Multer.File) {
    ImagesController.imageUrl = `./assets/${file.originalname}`;
    return ImagesController.imageUrl;
  }
}

CodePudding user response：

Angular HttpClient expects a JSON response per default. It will always try to parse the response body as a JSON and will fail if it is not. Please check the response body and set the response type accordingly.

Example:

this.http.post('http://localhost:3000/images/upload', formData, { responseType: 'text' })

Or, of course, you could let your server respond with a JSON. I am not familiar with NestJs, but I guess it would be enough to return an object:

return cb(null, { createdFile: `${filename}${extname(file.originalname)}` });

CodePudding user response：

try this, let me know if it not works.

async uploadimage(event: any) {
    event.target.files[0].title = 'file';
    this.AddbookForm.value.coverimage = event.target.files[0];
    console.log('file', this.AddbookForm.value.coverimage);
  }