使用 Angular 和 php 选择文件、裁剪和上传

Posted

技术标签:

【中文标题】使用 Angular 和 php 选择文件、裁剪和上传【英文标题】:select file, crop and upload with angular and php 【发布时间】:2019-02-05 11:46:11 【问题描述】:

我正在学习在the web 上找到的本教程,并且我已经正确安装了依赖项。但我无法将我的文件上传到服务器

JS imageChangedEvent: 任意 = ''; croppedImage: any = '';

fileChangeEvent(event: any): void 
    this.imageChangedEvent = event;

imageCropped(event: ImageCroppedEvent) 
    this.croppedImage = event.base64;
    const formData = new FormData();
    formData.append('file', this.croppedImage);
        this.http.post(this.global.baseUrl + upload.php', formData, 
        ).subscribe(data => 
        console.log(JSON.stringify(data));
        // this.newfileName = (data);
        this.loader = false;
    );

imageLoaded() 
    // show cropper

loadImageFailed() 
    // show message

html

                 <image-cropper
                      [imageChangedEvent]="imageChangedEvent"
                      [maintainAspectRatio]="true"
                      [aspectRatio]="4 / 4"
                      [resizeToWidth]="128"
                      format="png"
                      (imageCropped)="imageCropped($event)"
                      (imageLoaded)="imageLoaded()"
                      (loadImageFailed)="loadImageFailed()"
                  ></image-cropper>

PHP

$path = '../upload_imgs/';
if (isset($_FILES['file'])) 
  $originalName = $_FILES['file']['name'];
  $ext = '.'.pathinfo($originalName, PATHINFO_EXTENSION);
  $generatedName = md5($_FILES['file']['tmp_name']).$ext;
  $filePath = $path.$generatedName;
  $photo=array("generatedName"=>($generatedName));
  if (!is_writable($path)) 
    echo json_encode(array(
      'status' => false,
      'msg'    => 'Destination directory not writable.'
    ));
    exit;
  

  if (move_uploaded_file($_FILES['file']['tmp_name'], $filePath)) 
    echo json_encode(array($photo));
  

else 
  echo json_encode(
    array('status' => false, 'msg' => 'No file uploaded.')
  );
  exit;

裁剪后控制台什么也没读。是不是我做错了什么?

【问题讨论】:

【参考方案1】:

这里是不是少了一个撇号:

        this.http.post(this.global.baseUrl + upload.php', formData, 

【讨论】:

以上是关于使用 Angular 和 php 选择文件、裁剪和上传的主要内容,如果未能解决你的问题,请参考以下文章

使用 PHP 裁剪图像

php缩放图像裁剪

将裁剪的图像发送到数据库 ajax 在客户端和服务器上的 PHP

PHP图像从顶部,底部,左侧和右侧裁剪

上传时如何裁剪图像?

通过 Ajax 将裁剪的图像数据发送到 PHP