将文件上载到服务器和php

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

我从php文件中得到一个错误，称为未定义的索引“file” HTML

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

服务

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

上传法

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

---

以下是示例代码：

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">

如果您看到，您可以注意到允许的类型有：

export type TextFieldTypes='date'|'email'|'number'|'password'|'search'|'tel'|'text'|'url'|'time'；

---

如果你想上传文件，请点击链接，我想你会找到答案。我检查了你的代码，正如我看到的

文件

添加到

表单数据

中的是带有

字符串

类型的文件名，而不是

文件

或

Blob

数据类型。因此，在这种情况下，它不会将文件发送到

$\u文件

，而是将其值发送到

PHP服务器

中的

$\u POST

。总之，

File

和

Blob

类型将被发送到

$\u文件

，其他数据类型将被发送到相应的全局变量

---

还有一个关于如何在

PHP服务器

中验证文件的好例子：

是否

addFile

引发错误？很抱歉，忘记添加错误。您是否已在上面进行了编辑？能否提供完整的堆栈跟踪？在上面的编辑中添加了图像使用此插件：获取此错误文件TransferError{code:1，来源：“C:\fakepath\panda.jpg”，目标：，http_状态：null，正文：null，…}上面为上传功能编辑了您的

此文件中的内容。上传文件

请共享它来自输入标签ngModel获取文件输入类型

文件

可能有一些问题。。如果只是图片，请使用摄像头插件。嗨，我一直在到处寻找一个文件插件的例子，但似乎找不到一个。按照我添加的上传文件的链接，它被记录好了。这就是文件插件吗？没有上传例如？如果你想上传文件使用我已经尝试过，但不能让它工作？它在上面的代码中，所以我只是将formData更改为文件或blob？没错。当您通过

HTML

标签上传文件时，实际上是

blob

类型，您可以将其附加到

DataForm

。

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