Как сохранить изображение в базе данных MySQL, используя angular2 и php - PullRequest
Новая
       30

Как сохранить изображение в базе данных MySQL, используя angular2 и php

0 голосов
/ 14 декабря 2018

Я хочу сохранить изображение в базе данных MySQL.Как я могу сделать это, используя php и angular ??

Я использую add-style.component.ts для загрузки изображения 

imageUploadEvent(event){
    let imageFile = event.target;
    if(imageFile.files.length > 0){
      console.log(imageFile.files[0]);
      let formData = new FormData();
      formData.append('file',imageFile.files[0]);
      this._databaseService.insertImageData(formData).subscribe((msg) => {
        console.log(msg);
      },(error) =>{
        console.log("Get Some Error");
        console.log(error);
      });
    }
  }

Я использую add-style.html следующим образом 

<div class="container">
  <div class="row">
    <div class="col s8 offset-2">
      <div class="card-panel teal lighten-2">
        <h4>Image Uploading</h4>
      </div>
      <form #imageform ="ngForm">
        <input type="file" class="form-file-control" (change)="imageUploadEvent($event)"> 
        <button type="submit" class="btn-lg btn-submit form-control" (click)="saveFormData()" >submit</button>
      </form>
    </div>
  </div>
</div>

Я использую database.service.ts для вызова php 

insertImageData(value){
    return this._http.get("http://localhost/jeleena-api/test-img.php",value).pipe(map(res => {
      console.log(res);
    }));
  }

Ниже приведен мой php-код 

<?php

//Create Database Connection
include "db-connection.php";
if(!empty($_FILES['file'])){
    $ext = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
    $image = time().'.'.$ext;
    if(move_uploaded_file($_FILES["file"]["tmp_name"],$image)){
        $sql = "INSERT INTO test(img) VALUES('".$image."')";
        $conn->query($sql);
        echo "successfully uploaded";
    }
    else{
        echo ' error ';
    }

    }
?>

1 Ответ

0 голосов
/ 14 декабря 2018

Хорошо, терпите меня.Вы можете использовать ngStyle для этого.https://angular.io/api/common/NgStyle Вам необходимо установить commonsmodule в вашем ngModule.

Теперь в вашем шаблоне вы можете сделать следующее, чтобы показать изображение:

<div [ngStyle]="background-image: url('./assets/images/youImage.jpg');">

Теперь вы можете показать свое изображение на основе URL.Так что вы можете вместо сохранения изображения в sql просто сохранить ./assets/images/youImage.jpg.

<div [ngStyle]="background-image: url(yourObject.image)>

И чтобы показать изображение, вы можете заставить объект дать емусвойство изображения и назначить строку из sql.

...