使用angular 7和php codeigniter上传图像文件

时间:2019-05-27 12:00:49

标签: php angular codeigniter

  

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条路径均未显示任何图像,我无法理解代码的问题,这是我的新手,请帮助我解决这个问题...

  

角度

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);
  }

这是我上传图像文件的角度代码,我对此代码没有任何问题,它可以在控制台上获得正确的输出,但是唯一的问题是后端代码点火器代码。

1 个答案:

答案 0 :(得分:0)

  1. 每次在输入中插入图像时,图像都会上传到后端(也许您想在单击按钮后将其移动)

  2. 您只想上传1张图片还是多张图片?

  3. 您正在解码php中的图像,您应该忽略这一点,因为您上传的是带formData的二进制文件而不是字符串(我不是php的专家,可能是我错了,但是在节点中只是将二进制文件保存在文件夹中)。