用PHP服务器上传离子图像

Question

我的离子应用程序有问题。单击按钮时，我想将图像上传到我的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()中添加映像目标路径，

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

嘿，内森的问题是因为文件的URL，在这里您仅提供url test.png。

而不是您应该将FileChooser插件用于Cordova，该插件给出了文件的绝对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));
}

如果您想要更多帮助，请评论。