Question

我将图像从Angular 8发送到PHP。现在，我需要知道如何解码文件并通过PHP创建并将其插入表产品中

我试图将其发布到数据库中并创建

类型脚本：导出类ProduitFormComponent实现OnInit，OnDestroy {

 selectedFile: File
 public AuthForm: FormGroup;
 public items: any;


  constructor(private ngxService: NgxUiLoaderService, private alertService: 
  AlertService, private formBuilder: FormBuilder, private produitsService: 
  ProduitService, private router: Router, private http: HttpClient) {

  }

  ngOnInit() {
  this.AuthForm = this.formBuilder.group({
  categorie: ['', Validators.compose([Validators.required])],
  niveau: ['', Validators.compose([])],
  marque: ['', Validators.compose([Validators.required])],
  couleur: ['', Validators.compose([])],
  prix: ['', Validators.compose([Validators.required])],
  quantite: ['', Validators.compose([Validators.required])],
  photo: ['', Validators.compose([])]
  });
  }

  public hasError = (controlName: string, errorName: string) => {
  return this.AuthForm.controls[controlName].hasError(errorName);
  }

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

  onLoadNiveau() {
  let body = {
  niveau: this.AuthForm.get('niveau').value
  }
  console.log(body);
  this.http.post("http://localhost/SmartLibrary/api/getNiveau.php", 
  JSON.stringify(body)).subscribe((res) => {
  this.items = res;
  console.log(res);
  });
  }



onSubmit() {
let categorie = this.AuthForm.get('categorie').value;
let marque = this.AuthForm.get('marque').value;
let couleur = this.AuthForm.get('couleur').value;
let prix = this.AuthForm.get('prix').value;
let quantite= this.AuthForm.get('quantite').value;
let niveau = this.AuthForm.get('niveau').value;
let photo = this.AuthForm.get('photo').value;
marque = marque.trim().toLowerCase();
const newProduit = new Produit(categorie, marque, couleur, prix, 
quantite);
newProduit.niveau = niveau;
newProduit.photo = this.selectedFile;
this.produitsService.addProduit(newProduit);
console.log(newProduit);
this.http.post("http://localhost/SmartLibrary/api/addproduit.php", 
JSON.stringify(newProduit)).subscribe((res) => {
let items: any = res;
console.log(res);
this.ngxService.start();
setTimeout(() => {
this.ngxService.stop();
}, 3000);
this.alertService.success('Succés! Produit ajouté !');
this.ngxService.start();
setTimeout(() => {
this.ngxService.stop();
}, 3000);
});
this.AuthForm.reset();
this.router.navigate(['/espace-admin']); 
}
ngOnDestroy() {
this.AuthForm.reset();
}

//php :
<?php

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true ");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS, 
FILES');
header("Access-Control-Allow-Headers: X-Custom-Header, Origin, Content- 
Type , Authorisation , X-Requested-With");
header("Content-Type: application/json; charset=UTF-8 ");

$json = file_get_contents('php://input');
$decoded = json_decode($json);
$d = json_decode($json);
$category = $decoded->categorie;
$marque = $decoded->marque;
$couleur = $decoded->couleur;
$prix = $decoded->prix;
$qte = $decoded->qte;
$niveau = $decoded->niveau;
$photo = $d['photo'];



function conn()
{
$dbhost = "localhost";
$user = "root";
$pass = "";
$db = "smart";
$conn = new PDO('mysql:host=localhost;dbname=smart', $user, $pass);
return $conn;
}


$db = conn();
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


$prepred = $db->prepare("INSERT INTO produit (categorie, marque, prix, 
couleur, qte, niveau, photo) VALUES(?,?,?,?,?,?,?)");
$prepred->execute([$category, $marque, $prix, $couleur, $qte, $niveau, 
$photo]);
echo json_encode(true);

?>
//html code : 
<input <code js>#file type="file" formControlName="photo" 
accept='image/*' (change)="onFileChanged($event)" />

我希望创建该图像并将其放置在资产文件夹中，但不会创建或插入任何图像。

Answer 1

您可以尝试如下所示的表单数据

onSubmit() {
         let categorie = this.AuthForm.get('categorie').value;
         let marque = this.AuthForm.get('marque').value;
         let couleur = this.AuthForm.get('couleur').value;
         let prix = this.AuthForm.get('prix').value;
         let quantite= this.AuthForm.get('quantite').value;
         let niveau = this.AuthForm.get('niveau').value;
         let photo = this.AuthForm.get('photo').value;
         marque = marque.trim().toLowerCase();
         const newProduit = new Produit(categorie, marque, couleur, prix, quantite);
         newProduit.niveau = niveau;
         newProduit.photo = this.selectedFile;
         this.produitsService.addProduit(newProduit);

         let formData = new FormData();
         formData.append("categorie", categorie);
         formData.append("marque", marque);
         formData.append("quantite", quantite);
         formData.append("prix", prix);
         formData.append("photo", this.selectedFile);

    this.http.post("http://localhost/SmartLibrary/api/addproduit.php",formData).subscribe((res) => {
    ...
    });
    ...
         }

php代码

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true ");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS, FILES');
header("Access-Control-Allow-Headers: X-Custom-Header, Origin, Content- Type , Authorisation , X-Requested-With");
header("Content-Type: application/json; charset=UTF-8 ");

$target_dir = "assets/";
$target_file = $target_dir . basename($_FILES["photo"]["name"]);
if(!empty($_FILES["photo"])){
    move_uploaded_file($_FILES["photo"]["tmp_name"], $target_file);
    $category = $_POST['categorie'];
    $quantite = $_POST['quantite'];
    ...
    ...
    $photo = basename( $_FILES["photo"]["name"]);
    ...
}
...
?>

如何保存角度接收的图像？

1 个答案: