Как отправить изображение в виде блоба из Angular? - PullRequest
Новая
       35

Как отправить изображение в виде блоба из Angular?

0 голосов
/ 09 марта 2019

Я использую тег ввода файла, чтобы получить файл изображения. Теперь я хочу отправить его в виде большого двоичного объекта, который я хочу сохранить в базе данных в виде строки. Я извлечу его и отредактирую как изображение с помощью вызова get.

Но как мне опубликовать изображение в виде капли?

Ответы [ 3 ]

0 голосов
/ 09 марта 2019

Я согласен с комментарием выше. Это пример для вас

Или вы можете использовать dataForm, как показано ниже: 

 uploadPicture(formData: FormData, code: string) {
    // /** In Angular 5, including the header Content-Type can invalidate your request */
    const headers = new HttpHeaders();
    headers.append('Content-Type', null);
    headers.append('Accept', 'application/json');
    const options =  {
        headers: headers
    };

    const url = this.xxxServiceURL + '/custom/xxx/uploadPicture/' + code;
    return this.httpClient.post(url, formData, options);
}
0 голосов
/ 09 марта 2019

Вы можете отправить его, используя FormData() HTML 

<input name="image" type="file" (change)="file($event)" required>

TS 

file(event) {
  let elem = event.target;
  if(elem.files.length > 0) {
    let formData = new FormData();
    formData.append('file', elem.files[0], elem.files[0].name)
    this._auth.uploadImg(formData) //send it to service so you can make http call and send it as a post method to the backend
      .subscribe((data) => {
        console.log(data) //Image name
      },
        (error) => {
          console.log('error: ', error)
      })
  }
}

PHP 

$imageFolder = "images/";

if(isset($_FILES)) {        
    if(preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $_FILES['file']['name'])){ //checking file name in english
        echo json_encode('Invalid name');
        exit();
    }

    if(!in_array(strtolower(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))){ // checking file extension
        echo json_encode('Invalid extension');
        exit();
    }

    $name = explode('.', $_FILES['file']['name']);
    $ext = end($name);
    $name = reset($name).md5($date).'.'.$ext;
    $filetowrite = $imageFolder . $name;
    move_uploaded_file($_FILES['file']['tmp_name'], $filetowrite); //move the image to the directory defined in $imageFolder variable above

    echo json_encode($name); //return current image name to angular
    exit();
} else {
    echo json_encode('No such file');
    exit();
}
0 голосов
/ 09 марта 2019

Из этой ссылки .

Ваш сервис getBlob: 

getBlobThumbnail(): Observable<Blob> {  
  const headers = new HttpHeaders({
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  });
  return this.httpClient.post<Blob>(this.thumbnailFetchUrl,
    {
      "url": "http://acs/container/Logo.png"
    }, {headers: headers, responseType: 'blob' as 'json' });
}

И ваш компонент: 

imageBlobUrl: string;
getThumbnail() : void {
  this.ablobService.getBlobThumbnail()
    .subscribe(
      (val) => { 
        this.createImageFromBlob(val);
      },
      response => {
        console.log("POST in error", response);
      },
      () => {
        console.log("POST observable is now completed.");
      });
}
...