Question

我无法获得Ionic 3基本示例代码。它使用Cordova插件进行摄像头和文件传输，将图像上传到服务器（Django Rest Framework）。前端是在Android上运行。

home.ts

import {Component} from '@angular/core';
import {
  NavController,
  ToastController,
  Platform,
  LoadingController,
  Loading
} from 'ionic-angular';

import {File} from '@ionic-native/file';
import {Transfer, TransferObject} from '@ionic-native/transfer';
import {FilePath} from '@ionic-native/file-path';
import {Camera} from '@ionic-native/camera';

declare var cordova: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  lastImagePath: string = null;
  lastImage: string = null;
  loading: Loading;

  constructor(public navCtrl: NavController,
          private camera: Camera,
          private transfer: Transfer,
          private file: File,
          private filePath: FilePath,
          public toastCtrl: ToastController,
          public platform: Platform,
          public loadingCtrl: LoadingController) {
  }

  public clickTakePicture() {
    // Create options for the Camera Dialog
    var options = {
      quality: 80,
      sourceType: this.camera.PictureSourceType.CAMERA,
      saveToPhotoAlbum: false,
      correctOrientation: true
    };

    // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {
    var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
    this.lastImagePath = imagePath;
    this.lastImage = currentName;
    }, (err) => {
      this.presentToast('Error while getting image from camera.');
    });
  }

  private presentToast(text) {
    let toast = this.toastCtrl.create({
      message: text,
      duration: 4000,
      position: 'top'
    });
    toast.present();
  }

  public uploadImage() {
    // Destination URL
    var url = "http://192.168.1.6:8000/api/photo/";

    // File for Upload
    var targetPath = this.lastImagePath;

    // File name only
    var filename = this.lastImage;

    var options = {
      fileKey: "file",
      fileName: filename,
      chunkedMode: false,
      mimeType: "multipart/form-data",
      params: {'fileName': filename}
    };

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

    this.loading = this.loadingCtrl.create({
      content: 'Uploading...',
    });
    this.loading.present();

    // Use the FileTransfer to upload the image
    fileTransfer.upload(targetPath, url, options).then(data => {
      this.loading.dismissAll()
      this.presentToast('Image succesful uploaded.');
    }, err => {
      this.loading.dismissAll()
      this.presentToast('Error uploading targetPath ' + targetPath);
    });
  }

}

home.html的

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Devdactic Image Upload2
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  lastImagePath = {{ lastImagePath }}
  lastImage = {{ lastImage }}

  <img src="{{ lastImagePath }}" style="width: 100%" [hidden]="lastImagePath === null">
  <h3 [hidden]="lastImagePath !== null">Please Select Image!</h3>
</ion-content>

<ion-footer>
  <ion-toolbar color="primary">
    <ion-buttons>
      <button ion-button icon-left (click)="clickTakePicture()">
    <ion-icon name="camera"></ion-icon>Select Image
      </button>
      <button ion-button icon-left (click)="uploadImage()" [disabled]="lastImage === null">
    <ion-icon name="cloud-upload"></ion-icon>Upload
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

我的后端服务器甚至没有注册尝试访问它。如果我只是使用浏览器并访问http://192.168.1.6:8000/api/photo/，则服务器会注册GET请求。

一旦相机捕获了图像，图像就会显示在页面上但是当我尝试使用fileTransfer.upload（）时出现错误。

更新 - 根据我运行应用程序的方式，似乎会有不同的结果。

console.log（）的结果

  console.log("Error " + err.code)
  console.log("Error " + err.source)
  console.log("Error " + err.target)
  console.log("Error " + err.http_status)
  console.log("Error " + err.body)
  console.log("Error " + err.exception)

当使用离子cordova运行android --debug时，我可以看到我的服务器（HTTP 401）的响应，我可以使用它。

10-10 22：28：23.989 18878 18878 I chromium：[INFO：CONSOLE（131）]“错误 3“，来源：file：///android_asset/www/build/main.js(131)10-10 22：28：23.990 18878 18878 I chromium：[INFO：CONSOLE（132）]“错误文件：///storage/emulated/0/Android/data/io.ionic.starter/cache/1507642101200.jpg” 来源：file：///android_asset/www/build/main.js(132)10-10 22：28：23.991 18878 18878 I chromium：[INFO：CONSOLE（133）]“错误 http://192.168.1.6:8000/api/photo/“，来源： file：///android_asset/www/build/main.js(133)10-10 22：28：23.992 18878 18878 I chromium：[INFO：CONSOLE（134）]“错误null”，来源： file：///android_asset/www/build/main.js(134)10-10 22：28：23.992 18878 18878 I chromium：[INFO：CONSOLE（135）]“错误null”，来源： file：///android_asset/www/build/main.js(135)10-10 22：28：23.993 18878 18878 I chromium：[INFO：CONSOLE（136）]“错误管道”，来源： file：///android_asset/www/build/main.js(136)

使用离子上传和Legacy Ionic View应用程序时，我的服务器根本没有响应，错误字段为空。

10-10 23:06：56.199 28933 28933 I chromium：[INFO：CONSOLE（132）]“错误 null“，来源：文件：///data/user/0/com.ionic.viewapp/files/files//5bdfa3f9/build/main.js （132）10-10 23:06:56.199 28933 28933我铬：[信息：控制台（133）] “错误null”，来源：文件：///data/user/0/com.ionic.viewapp/files/files//5bdfa3f9/build/main.js （133）10-10 23:06:56.199 28933 28933我铬：[信息：控制台（134）] “错误null”，来源：文件：///data/user/0/com.ionic.viewapp/files/files//5bdfa3f9/build/main.js （134）10-10 23:06:56.200 28933 28933我铬：[信息：控制台（135）] “错误null”，来源：文件：///data/user/0/com.ionic.viewapp/files/files//5bdfa3f9/build/main.js （135）10-10 23:06:56.200 28933 28933我铬：[信息：控制台（136）] “错误null”，来源：文件：///data/user/0/com.ionic.viewapp/files/files//5bdfa3f9/build/main.js （136）10-10 23:06:56.201 28933 28933我铬：[信息：控制台（137）] “错误null”，来源：文件：///data/user/0/com.ionic.viewapp/files/files//5bdfa3f9/build/main.js （137）

Ionic FileTransfer无法访问服务器

0 个答案: