ionic cordova一次上传多张图片（类似input file提交表单)的实现方法

一、背景

在移动端开发中，经常会遇到需要上传多张图片的需求，例如上传头像、相册、动态图片等。Ionic是一个基于AngularJS和Cordova的开发框架，提供了丰富的插件和能力，可以便捷地实现这类功能。

二、实现思路

实现多张图片上传的关键在于，需要通过Cordova的File Transfer插件将多张图片上传到服务器。因为Cordova File插件只支持单张图片上传功能，所以对于多张图片，需要进行循环遍历，逐一上传。

具体步骤如下：

1. 安装Cordova File Transfer插件

cordova plugin add cordova-plugin-file-transfer

1. 引入Cordova File Transfer插件

import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';

1. 获取文件的文件流，并放入FileUploadOptions参数对象中

const fileTransfer: FileTransferObject = this.transfer.create();
var options: FileUploadOptions = {
  fileKey: 'file',
  fileName: 'name.jpg',
  mimeType: 'image/jpeg',
  chunkedMode: false,
  headers: {}
}

其中fileKey代表文件名称，fileName代表文件名，mimeType代表文件类型，chunkedMode代表上传是否分块，headers代表上传需要携带的额外参数。

1. 循环遍历图片数组，将每一张图片上传到服务器上。

for(let i=0; i<this.imageList.length; i++) {
    let imageURI = this.imageList[i];
    fileTransfer.upload(imageURI, encodeURI("http://your-server-url"), options)
      .then((data) => {
        // 成功上传
        console.log(data.response);
      }, (err) => {
        // 上传失败
        console.log(err.body);
      });
}

其中imageList代表准备上传的图片数组，循环遍历每张图片，调用upload方法进行上传。

三、示例说明

下面分别通过html和ts的代码片段，演示如何在Ionic中实现多张图片上传功能。

示例1：使用HTML5 input file上传

<input type="file" (change)="selectMultiImage($event)">
<button ion-button (click)="upload()">上传</button>

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  imageList: any[] = []; // 准备上传的图片数组 
  transfer: FileTransferObject; // 定义FileTransferObject对象

  constructor(private transfer: FileTransfer) {
  }

  selectMultiImage(event) {
    // 获取选择的文件列表，使用FileReader预览
    for (let i = 0; i < event.target.files.length; i++) {
      const file = event.target.files[i];
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.imageList.push(reader.result);
      }
    }
  }

  upload() {
    let options: FileUploadOptions = {
      fileKey: 'file',
      fileName: 'name1.jpg',
      mimeType: 'image/jpeg',
      chunkedMode: false,
      headers: {}
    }

    for(let i=0; i<this.imageList.length; i++) { 
      let imageURI = this.imageList[i];
      this.transfer.upload(imageURI, encodeURI("http://your-server-url"), options)
      .then((data) => {
        console.log(data.response);
      }, (err) => {
        console.log(err.body);
      });
    }
  }
}

示例2：使用Ionic Native自定义上传按钮

<ion-row>
  <ion-col>
    <button ion-button color="primary" block (click)="selectMultiImage()">选择图片</button>
  </ion-col>
  <ion-col>
    <button ion-button color="primary" block (click)="upload()"> 上传</button>
  </ion-col>
</ion-row>

<ion-list>
  <ion-item *ngFor="let image of imageList">
    <img [src]="image" [width]="80" [height]="80">
  </ion-item>
</ion-list>

import { Component } from '@angular/core';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';
import { ActionSheetController } from 'ionic-angular';
#import { Camera } from '@ionic-native/camera/ngx';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  imageList: any[] = []; // 准备上传的图片列表 
  transfer: FileTransferObject; // 定义FileTransferObject对象

  constructor(private transfer: FileTransfer,
              private actionSheetCtrl: ActionSheetController,
              private camera: Camera) {
  }

  // 构建底部操作菜单
  presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      buttons: [
        {
          text: '相机',
          handler: () => {
            this.takePicture(1);
          }
        },{
          text: '从相册选',
          handler: () => {
            this.selectMultiImage();
          }
        },{
          text: '取消',
          role: '取消'
        }
      ]
    });
    actionSheet.present();
  }

  // 拍照，并将照片存入图片列表中
  takePicture(type:number) {
    var options = {
        quality: 50,
        sourceType: type,
        mediaType: this.camera.MediaType.PICTURE,
        destinationType: this.camera.DestinationType.FILE_URI,
        encodingType: this.camera.EncodingType.JPEG,
        saveToPhotoAlbum: false
    };

    this.camera.getPicture(options).then((imageURI) => {
        this.imageList.push(imageURI);
    }, (err) => {
        console.log(err);
    });
  }

  // 从相册获取照片，并将照片存入图片列表中
  selectMultiImage(){
    var options = {
        maximumImagesCount: 10,
        quality: 50,
        width: 800,
        height: 800,
        outputType: 1
    };
    this.camera.getPicture(options).then((imageData) => {
      this.imageList.push(imageData);
    }, (err) => {
      console.log(err);
    });
  }

  // 批量上传图片
  upload() {
    let options: FileUploadOptions = {
      fileKey: 'file',
      fileName: 'name1.jpg',
      mimeType: 'image/jpeg',
      chunkedMode: false,
      headers: {}
    }

    for(let i=0; i<this.imageList.length; i++) {
      let imageURI = this.imageList[i];
      this.transfer.upload(imageURI, encodeURI("http://your-server-url"), options)
      .then((data) => {
        console.log(data.response);
      }, (err) => {
        console.log(err.body);
      });
    }
  }
}

四、总结

实现多张图片上传对于移动端应用开发来说是一项必要的功能。Ionic框架提供了丰富的插件和能力，使得我们可以轻松实现这类功能。需要注意的是，在上传过程中需要注意避免网络慢、弱、断开等问题。同时，尽可能缩小上传文件的大小，保证用户体验。