ionic 文件上传 ionic4.x

最近在做ionic4的app项目，遇到上传图片和拍照已经处理，上传本地文件还碰到了一些小问题。首先引入

 // File Transfer
ionic cordova plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/file-transfer  
 // File Path
ionic cordova plugin add cordova-plugin-filepath
npm install @ionic-native/file-pathz
 // File Chooser
ionic cordova plugin add cordova-plugin-filechooser
npm install @ionic-native/file-chooser

在app.module.ts引用

image.png

在组件内引用

// 请注意此处FileTransfer要从ngx/index中引入，3版本不用，4版本不这样会报错。
import { FileTransfer, FileTransferObject, FileUploadOptions } from '@ionic-native/file-transfer/ngx/index';
import { FileChooser } from '@ionic-native/file-chooser/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';

  constructor(
    private filePath: FilePath,
    private transfer: FileTransfer,
    private fileChooser: FileChooser,
  ) { }

然后就是代码实现：

  upload() {
// 调用fileChooser打开本地文件管理器选择文件
    this.fileChooser.open().then(url => {
// 拿到url使用resolveUri方法转为path
      this.resolveUri(url).then(path => {
// 处理之后上传
        this.uploadFileByPath(url)
        // 这个uploadFileByPath方法就是上传至后台服务器的方法
      })
    }).catch(e => {
      console.log('失败');
    })
  }

 // 该方法用处在于转换选择文件格式为路径
  resolveUri(uri: string): Promise {
    return new Promise((resolve, reject) => {
 // 调用filePath
      this.filePath.resolveNativePath(uri).then(filePath => {
        resolve(filePath);
      }).catch(err => {
        reject(err);
      });
    })
  }

  uploadFileByPath(filepath) {
    this.showLoading()
    const fileTransfer: FileTransferObject = this.transfer.create();
    // 该配置项options详情见 https://github.com/apache/cordova-plugin-file-transfer
    let options: FileUploadOptions = {
      fileKey: 'file',
      fileName: filepath.substring(filepath.lastIndexOf(".") + 1, filepath.length),  // 文件类型 截取filepath后缀的JavaScript方法
      headers: {},
    }

    fileTransfer.upload(filepath, '/user/fileUpload', options)
      .then((data: any) => {
        console.log(data+'这里就可以做回显或者其他操作了');
        // success
      }, (err) => {
        // error
       console.log('失败');
      })

  }