将文件上传到服务器 ionic 和 php

Question

我有将图像发送到我的服务器的代码，一切正常。但是我现在正在使用 ionic 中的输入标签将文件发送到我的服务器但是我似乎无法让它工作。

我从 php 文件中得到一个错误，说 undefined index 'file' HTML

<ion-col>
    <ion-label>Add a File</ion-label>
    <ion-input type='file' [(ngModel)]="fileName"></ion-input>
</ion-col>

TS 文件

addFile() {
    this.addService.addFile(this.fileName).subscribe(res => {
        console.log(res);
    });
}

服务

addFile(file) {
    let headers = new HttpHeaders();
    // headers = headers.set('Content-Type', 'application/json');
    headers = headers.set('Authorization', '' + this.token);
    const formData = new FormData();
    formData.append('file', file);
    return this.http.post<any>('http://domain.fileUpload.php', formData, {headers});
}

PHP API

$target_path = "files/";
$target_path = $target_path . basename( $_FILES['file']['name']);
$findDate = date("Y-m-d");

if (move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {             
    header('Content-type: application/json');
    $data = ['success' => true, 'message' => 'Upload and move success'];

    echo json_encode( $data );

} else {
    header('Content-type: application/json');
    $data = ['success' => false, 'message' => 'There was an error uploading the file (folder), please try again!'];
    echo json_encode( $data );
}

上传方法

uploadFile: ''; // from ngModel
fileUpload(path) {
    const fileTransfer: FileTransferObject = this.transfer.create();
    let options: FileUploadOptions = {
      fileKey: 'file',
      fileName: '.png',
      chunkedMode: false,
    };

    console.log(this.uploadFile);

    fileTransfer
      .upload(this.uploadFile, 'http://domain/fileUpload.php',
        options
      )
      .then(
        data => {
          console.log(data + 'Uploaded Successfully');
          // console.log(JSON.parse(data.));
          // let res = JSON.parse(data);
          let res = data;
          if (res['success']) {
            console.log('True');
          }
        },
        err => {
          console.log(err);
        }
      );
  }

Answer 1

Blow 是示例代码：

import { Platform } from 'ionic-angular';

checkPlatform: boolean = fasle;

constructor(public plt: Platform) {
    if (this.plt.is('ios')) {
      this.checkPlatform == true; // if platform ios this will be true
    }
    if (this.plt.is('android')) {
      this.checkPlatform == true; // if platform androidthis will be true
    }

  }

imageUpload(path) {
  const fileTransfer: FileTransferObject = this.transfer.create();
  let options: FileUploadOptions = {
      fileKey: 'image',
      fileName: '.png',
      chunkedMode: false,
      //mimeType: "image/jpeg",
    }


    fileTransfer.upload(path, 'https://yourDomain.com/api/imageUpload', options)
      .then((data) => {
      console.log(data+" Uploaded Successfully");
      console.log(JSON.parse(data.response));
      let res = JSON.parse(data.response);
      if (res.success == true) {
          // do whats ever you want to do
      }


    }, (err) => {
      console.log(err);

    });
}

在此函数中将cordova 文件路径作为参数传递。

在您的 HTML 模板中显示按钮或输入类型，如下所示：

<input type="file" *ngIf="checkPlatform == true">

Answer 2

我检查了您的代码，我看到添加到FormData 的file 是string 类型的文件名，而不是File 或Blob 数据类型。所以在这种情况下，它不会将文件发送到$_FILES，它实际上将它的值发送到您的PHP Server 中的$_POST。综上所述，File 和Blob 类型将被发送到$_FILES，其他数据类型将被发送到相应的全局变量。

PHP Server 中还有一个关于如何验证文件的好示例：https://www.php.net/manual/en/features.file-upload.php

Answer 3

如果您看到this，您会注意到允许的类型是：

export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time'; 如果你想上传文件，请关注this 链接，我想你会找到答案的