Question

对angularjs来说很新。我正在构建一个包含带有angularjs 4的图像上传的表单。我确实得到了我的表单文本输入的其他值，我的问题或我发现它令人困惑的是获取文件路径或将其复制到文件夹（即上传到文件夹）我给的文件夹）。如果我能在这里得到细分，我将非常感激，因为我在网上看到的只有棱镜1和2对我来说是不同的（在结构上）。

app.component.html

<div class="container">
    <form [formGroup]="EmpForm" (ngSubmit) = "OnSubmit(EmpForm.value)" enctype="multipart/form-data">
        <div class="col-md-6">
            <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control" id="empName" formControlName="name">
            </div>
            <div class="form-group">
                <label>Profile Picture</label>
                <input type="file" class="form-control" id="Image" #EmpImage formControlName="EmpImage" accept="image/*"  file-input="files">
            </div>  
        <div class="form-group">
            <button type="submit" class="btn btn-primary" [disabled]="!EmpForm.valid">SUBMIT</button> 
        </div>
        </div>
    </form>
</div>

app.component.ts

 import { Component, ViewChild } from '@angular/core';
    import {FormBuilder, FormGroup, Validators} from '@angular/forms';
    import { FormsubmitService } from './formsubmit.service';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      EmpForm: FormGroup;
      EmpImageFile: File;
      @ViewChild('EmpImage') Emp_Image;
      constructor(private  fb: FormBuilder, private fbservice: FormsubmitService) {
        this.EmpForm = this.fb.group({
            'name': ['', Validators.required],
            'EmpImage': [''] /* tried using Validators.required here but it stile return invalid when a file is selected*/
        });
      }

     OnSubmit(value) {
        const File = this.Emp_Image.nativeElement;
          if (File.files && File.files[0]) {
              this.EmpImageFile = File.files[0];
          }
          const EmpImageUploadFile: File = this.EmpImageFile;

          const formData: FormData = new FormData();
          formData.append('name', value.name);
          formData.append('EmpImage', EmpImageUploadFile, EmpImageUploadFile.name);

          this.fbservice.submitData(formData).subscribe(
                data => {
                    console.log(data);
                }
            );
      }
    }

formSubmitService

    import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';
    import 'rxjs/add/operator/map';
    import 'rxjs/Rx';


    @Injectable()
    export class FormsubmitService {

      constructor(private http: Http) { }

      submitData(formGroup) {
        const URL = 'http://localhost:80/angularfileupload/angularfileupload.php';
        const Res = this.http.post(URL, formGroup).map(res => res.json());
        return Res;
      }
    }

angularfileupload.php

   <?php 
header('Access-Control-Allow-Origin: *');


    $name = $_REQUEST['name'];
    $image = $_FILES["image"];

    print_r($name);
    print_r($image);

    ?>

// print_r的响应

ChineduArray
(
    [name] => 2go_1036207947.jpg
    [type] => image/jpeg
    [tmp_name] => C:\xampp\tmp\php58BD.tmp
    [error] => 0
    [size] => 5252
)

这是我觉得很难得到的地方。我可以获取文件路径，也可以获取图像的八位字节值。

Answer 1

<?php
header('Access-Control-Allow-Origin: *');

    $target_dir = "upload/";
    $name = $_REQUEST['name'];
    $image = $_FILES["image"]['name'];
    $target_file = $target_dir . basename($image);

    $image_tmp = $_FILES["image"]["tmp_name"];
    $uploadOk = 1;

    $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
    // Check if image file is a actual image or fake image
    $check = getimagesize($image_tmp);
    if($check !== false) {
        move_uploaded_file($image_tmp, $target_file);
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
?>

图像实际上位于a [tmp_name] =＆gt; C：\ XAMPP \ tmp目录\ php58BD.tmp 我必须使用 $ target_file = $ target_dir。基名（$ _ FILES [＆＃34;图像＆＃34;] [＆＃39;名称＆＃39;]）; 然后将其移动到该文件夹 move_uploaded_file（$ image_tmp，$ target_file）;

如何使用php作为后端

1 个答案: