使用 PHP 服务器上传 Ionic 图像

Question

我的 ionic 应用程序有问题。 当我单击一个按钮时，我想将图像上传到我的 php 服务器，但似乎我做错了什么......

Communication.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 Server Send Test
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
  <ion-item>
<button ion-button (click)="uploadFile()">Upload</button>
</ion-item>
  </ion-list>

</ion-content>

Communication.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';

@Component({
    selector: 'communication',
    templateUrl: 'communication.html'
})


export class CommunicationPage {
  imageURI:any;
imageFileName:any;

constructor(public navCtrl: NavController,
  private transfer: FileTransfer) {}

  uploadFile() {

  const fileTransfer: FileTransferObject = this.transfer.create();

  let options: FileUploadOptions = {
    fileKey: 'ionicfile',
    fileName: 'ionicfile',
    chunkedMode: false,
    headers: {}
  }

  fileTransfer.upload('C:/Users/Nathan/Desktop/Recognize/src/pages/communication/test.png', 'http://someserver', options)
    .then((data) => {
    console.log(data+" Uploaded Successfully");
  }, (err) => {
    console.log(err);
  });
}
}

点击上传按钮时出现此错误：

FileTransferError {code: 1, source:"C:/Users/Nathan/Desktop/Recognize/src/pages/communication/test.png", target: "http://someserver", http_status: null, body: null, …}

我知道“test.png”文件的 url 有问题，因为代码 1 错误。

你有什么想法吗？

Answer 1

你需要像这样在fileTransfer.upload()添加图片targetPath，

var targetPath = this.file.dataDirectory + imgName;

fileTransfer.upload(targetPath, 'http://someserver', options)
    .then((data) => {
    console.log(data+" Uploaded Successfully");
  }, (err) => {
    console.log(err);
});

Answer 2

Hey Nathan，您遇到的问题是因为文件的 URL，在这里您只提供了 test.png 的 URL。

而不是你应该为cordova使用FileChooser插件，它给出了文件的绝对URL。

import { FileChooser } from '@ionic-native/file-chooser';

constructor(private fileChooser: FileChooser) { }
function() {
const fileTransfer: FileTransferObject = this.transfer.create();

  let options: FileUploadOptions = {
    fileKey: 'ionicfile',
    fileName: 'ionicfile',
    chunkedMode: false,
    headers: {}
  }


this.fileChooser.open()
  .then(uri => {
      fileTransfer.upload(uri, 'http://someserver', options)
    .then((data) => {
    console.log(data+" Uploaded Successfully");
  }, (err) => {
    console.log(err);
  });
  })
  .catch(e => console.log(e));

}

如果您需要更多帮助，请发表评论。