angularjs — Как загрузить / скопировать файл в папку в Angularjs 4, используя php в качестве бэкэнда

Я очень новичок в angularjs. Я создаю форму, которая содержит загрузку изображения с помощью angularjs 4. Я действительно получаю другое значение для ввода текста в моей форме, моя проблема или проблема, с которой я сталкиваюсь, заключается в том, чтобы получить путь к файлу или скопировать его в папку (т.е. загрузить в папку), которую я дал. Я буду очень признателен, если смогу разобраться в этом, поскольку все, что я видел в Интернете, относится к angularjs 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
)

Вот где мне трудно получить. Я не могу получить ни путь к файлу, ни значение октета изображения.

0

Решение

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

Изображение на самом деле находится в
[tmp_name] => C: \ xampp \ tmp \ php58BD.tmp
который я должен обработать, используя
$ target_file = $ target_dir. Базовое имя ($ _ FILES [ «образ»] [ ‘имя’];);
Затем переместите его в папку
move_uploaded_file ($ image_tmp, $ target_file);

0

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector