Ionic3 图片上传

使用到的插件：

• file-transfer 用于文件上传或下载
• camera 照相或获取相册的图片
• file 格式转换

注意：

ionic3 使用的插件都为 4.x版本，引用格式为 import { File } from '@ionic-native/file'。 而最新适用于 ionic4 的版本为 5.x，引用格式为 import { File } from '@ionic-native/file/ngx'。

新建一个ionic3项目

ionic start blank --type=ionic-angular
选择 blank 新建空白页面

安装插件

在项目目录下执行以下命令

ionic cordova plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/file-transfer@4

ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera@4

ionic cordova plugin add cordova-plugin-file
npm install --save @ionic-native/file@4

app.moudle.ts 中引用 provider

import { FileTransfer } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { Camera } from '@ionic-native/camera';

@NgModule({
.....
providers: [
    File,
    FileTransfer,
    Camera,
    StatusBar,
    SplashScreen,
    AndroidPermissions,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ] 
  })

home.ts 中编写获取图片及上传所需函数

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';



@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  fileTransfer: FileTransferObject = this.transfer.create();
  imageURI: any;
  imageFileName: any;

  constructor(public navCtrl: NavController,
    private camera: Camera,
    private transfer: FileTransfer,
    private androidPermissions: AndroidPermissions,
    private file: File) {

  }

  uploadFile() {
    const fileTransfer: FileTransferObject = this.transfer.create();
      
    let options: FileUploadOptions = {
      fileKey: 'file',
      fileName: 'name.jpg',
      mimeType: "image/jpeg",
      headers: {}
    }
    
     let params = {
        name:'hello',
        param:'aaaa'
     };
     
     options.params = params;
     
    //Android 8+ 访问非 https 的 url 会提示 Cleartext HTTP traffic not permitted
    fileTransfer.upload(this.imageURI, 'http://127.0.0.1:8888/api/user/upload', options)
      .then((data) => {
        console.log(data + " Uploaded Successfully");
      }, (err) => {
        console.log(err);
      });
  }

  takePicture() {
    const options: CameraOptions = {
      quality: 100,
      //是否对照片编辑
      allowEdit: true,
      //sourceType 为 this.camera.PictureSourceType.CAMERA 时调用照相机
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      saveToPhotoAlbum: true,
      correctOrientation: true,
      encodingType: this.camera.EncodingType.JPEG,
      //FILE_URI 获取Android的图片位置，DATA_URL获取 base64 编码，NATIVE_URI获取 IOS 系统的图片位置
      destinationType: this.camera.DestinationType.FILE_URI
    }
    this.camera.getPicture(options).then((imageData) => {
      this.imageURI = imageData;
      this.uploadFile();
      let filename = imageData.substring(imageData.lastIndexOf('/') + 1);
      let path = imageData.substring(0, imageData.lastIndexOf('/') + 1);
      
      //用 file.readAsDataURL 将图片转为 base64 便于页面显示
      this.file.readAsDataURL(path, filename).then(res =>
        console.log(res))；
    })
  }

}

由于在安卓高版本中的安全限制，访问非 https 的上传接口会提示 Cleartext HTTP traffic not permitted. 需修改 build 后的 Android 文件。

使用 Android Studio 打开 platform/android 文件夹.
修改 res/xml/network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

home.html 添加上传按钮

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="takePicture()">
    Click me
  </button>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

参考文档

Unable to display image using FILE_URI

How to Upload File on Ionic 3 using Native File Transfer Plugin

Android 8: Cleartext HTTP traffic not permitted