Загрузка файла изображения с использованием angular 7 с php codeigniter

Question

php-codeigniter

public function upload(){
    $image = base64_decode($this->input->post("p_image"));
    $image_name = md5(uniqid(rand(), true));
    $filename = $image_name . '.' . 'png';
    //rename file name with random number
    $path = "./uploads/images/".$filename;
    //image uploading folder path
    file_put_contents($path , $image);
    // image is bind and upload to respective folder

    $data_insert = array('p_image'=>$filename);
    if(!empty($data_insert )){
    $success=$this->db->insert('projects', $data_insert);

    }else{ } 
    if($success){
        $b = "User Registered Successfully..";
    }
    else
    {
        $b = "Some Error Occured. Please Try Again..";
    }
    echo json_encode($b);

}

В приведенном выше коде я не могу понять, почему путь вставляется 2 раза в базу данных с 2 разными путями, а 2 пути не являютсяпоказ любого изображения, я не понимаю, что не так с кодом, я новичок в этом, плз, помогите мне разобраться в этом ...

Angular

component.html

<div class="admin-page">
  <div class="add-projects-form">
    <form [formGroup]="myForm"  enctype="multipart/form-data">
    <!-- image upload start -->
        <div class="form-group">
        <div class="upload-image">
        <div #image class="image-wrapper"></div>
        <div class="browse-btn">
        <input type="file" name="cameraImg" id="cameraImg" (change)="onSelectedFile($event)" >
        </div>
        </div>
        </div>
        <div style="text-align: center;margin-top:40px;">
        <button class="btn btn-success" type="submit" (click)="addProject()">Add Project</button>
      </div> 
  </form>
</div>
</div>

component.ts

onSelectedFile(event) {
  if (event.target.files.length > 0) {
  const productImage = event.target.files[0];
  const formData = new FormData();
  formData.append('p_image', productImage);
  console.log(productImage.name);
  console.log(productImage);
  this.adminService.uploadImage(productImage).subscribe(
  res => {
  if (res){
  console.log('success')
  this.uploadError = '';
  } else {
  // this.uploadError = res.response.message;
  }
  },
  err => this.error = err
  );
  }
  } 

service.ts

  uploadImage(p_image){
    return this.http.post(`${CONFIG.API_URL}/Welcome/upload`, p_image);
  }

Это мой угловой код для загрузки файла изображения, у меня нет проблем с этим кодом, он корректно выводится на консоль, но единственная проблема - это код внутреннего кодового кодировщика.

Answer 1

1. Каждый раз, когда вы вставляете изображение во вход, оно загружается на сервер (возможно, вы захотите переместить его после нажатия кнопки)

2. Вы хотите загрузить только 1 изображение или несколько?

3. Вы декодируете изображение в своем php, вы должны пропустить это, потому что вы загружаете бинарный файл с formData, а не строкой (я не эксперт с php, возможно, я не прав, но в узле просто сохраните бинарный файл в папке).