Question

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

我从php文件中得到一个错误，说未定义的索引'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://ccoulter12.lampt.eeecs.qub.ac.uk/api/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 );
}

uploadMethod

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://ccoulter12.lampt.eeecs.qub.ac.uk/api/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

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

Answer 3

我检查了您的代码，发现添加到file的{{1}}是具有FormData类型而不是string或File数据类型的文件名。因此，在这种情况下，它不会将文件发送到Blob中，而是实际上将其值发送到$_FILES中的$_POST中。总之，PHP Server和File类型将发送到Blob，其他数据类型将发送到适当的全局变量。

还有一个很好的示例，说明如何在$_FILES中验证文件：https://www.php.net/manual/en/features.file-upload.php

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

3 个答案: