Question

我正在尝试将从角度应用程序选择的图像发送到我的php，这是我的工作。

 onSubmit(e) {
    e.preventDefault();
       this.submitted = true;
        if (this.profilForm.invalid) {
            return;
        }
                this.email  = this.profilForm.controls['email_txt'].value;

        this.fullname   = this.profilForm.controls['fullname_txt'].value;
        this.address    = this.profilForm.controls['address_txt'].value;
        this.telp       = this.profilForm.controls['telp_txt'].value;

        this.profilapi.updateProfil( this.fullname, this.address , this.telp , this.email, this.selectedFile ).subscribe((data:  Array<object>) => {
                this.userinfo  =  data;
                console.log( "blablabla - " + this.userinfo);
                this.alertService.danger("Something wrong please try again later");

       },
       error => {               
                console.log( "err - " + error );
                this.alertService.danger("Something error, please try again later");
            }
       );

  }

    onFileChanged(event) {
        this.selectedFile = event.target.files[0]
    }

我的服务

updateProfil(fullname,address,telp,email,profil){
        return  this.httpClient.post(
                `${this.API_URL}` , 
                {   
                    "fullname" : fullname, 
                    "address" : address , 
                    "telp" : telp , 
                    "email" : email , 
                    "profil" : profil
                } 
                );
    }

到目前为止，这是我的PHP。

<?php

include_once("Crud.php");
$crud = new Crud();

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

$postdata   = file_get_contents("php://input");
$request    = json_encode($postdata);
$email      = $request->email;
$fullname   = $request->fullname;
$address    = $request->address;
$phone      = $request->phone;
echo $email;
?>

我如何在php上接收图像并将其上传到指定的文件夹？在此先感谢您，我的英语很抱歉。

Answer 1

您正在尝试通过php://input获取文件数据，但是documentation警告我们说，这种方法不适用于enctype="multipart/form-data"表单，因此必须使用$_POST数组。

此外，如果您将POST请求发送到PHP脚本，则所有上传的文件都不会放入$_POST数组中，而是将它们放入$_FILES数组中，然后您就需要自己移动它们：

$uploads_dir = '/uploads';
foreach ($_FILES["pictures"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $tmp_name = $_FILES["pictures"]["tmp_name"][$key];
        // basename() may prevent filesystem traversal attacks;
        // further validation/sanitation of the filename may be appropriate
        $name = basename($_FILES["pictures"]["name"][$key]);
        move_uploaded_file($tmp_name, "$uploads_dir/$name");
    }
}

此处有更多信息：http://php.net/manual/en/features.file-upload.php

Answer 2

这是我将文件从Angular上载到PHP的方式：（这不是最佳解决方案，但效果很好）
1-从输入中读取文件并将其放入json对象：

readFile(event){
        let reader = new FileReader();
        if(event.target.files && event.target.files.length > 0) {
            let file:File = event.target.files[0];
            reader.readAsDataURL(file);
                reader.onload = () => {
                    let fielToUpload = {
                        fileName: file.name,
                        fileType: file.type,
                        fileExtension: file.name.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);,
                        value: reader.result.split(',')[1]
                    };
                    this.profilapi.updateProfil(fielToUpload).subscribe(res => // do whatever you want here);
                };
        }
    }

2-为您服务

updateProfil(fielToUpload: any): Observable<any>{
        let _headers = new HttpHeaders({
            'Content-Type': 'application/json',
        });
        return this._http.post('path/to/your/api', fielToUpload, {headers: _headers})
    }

3-从您的php文件中读取对象：

 $postdata   = file_get_contents("php://input");
    $data    = json_encode($postdata);
    $fileName = time().'.'.$data['fileExtension'];
    $path = '/path/to/upload/directory/'.$fileName;
    file_put_contents($path, base64_decode($data['value']));

Answer 3

如果要发送包含数据的图像或文件，则必须使用 FormaData对象：

public postFile(data: any) {
    const endpoint ='url'
    const formData: FormData = new FormData();
    formData.append('image', data.file, data.file.name);
    formData.append('type', data.type);
    formData.append('label', data.label);
    formData.append('profile', data.label);
    let headers = new HttpHeaders(); 
    headers = headers.set('Content-Type', 'multipart/form-data');
    headers = headers.set('Accept', 'application/json');
  
    return this._http
      .post(endpoint, formData, { headers: headers })
      
  }

将图像文件从angular发送到php

3 个答案: