Ionic3/4文件选择插件filechooser选择图片上传的问题

选择图库中的文件上传请看另一文章

在移动项目开发中，使用的是Ionic框架，当中涉及到文件上传。

开发思路：

1. 使用文件选择插件获取路径
2. 使用路径上传文件

开发流程涉及到的组件有(Ionic官方文档)

• 文件选择 https://ionicframework.com/do...
• 文件打开 https://ionicframework.com/do... （在已上传的文件列表中可能你会使用上）
• 文件路径 https://ionicframework.com/do...

插件安装

下面只列举文件选择的插件安装方法。文件打开和文件路径安装方式同理，文档有具体描述，文件选择插件有版本的注意事项

Ionic3.x

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

Ionic4.x

$ ionic cordova plugin add cordova-plugin-filechooser
$ npm install @ionic-native/file-chooser

文件选择 filechooser

文件选择filechooser插件能调用手机中的文件管理，选择文件夹里面的文件，成功则返回文件的路径。
使用方法如下

Ionic3.x

import { FileChooser } from '@ionic-native/file-chooser';

constructor(private fileChooser: FileChooser) { }

...
this.fileChooser.open()
  .then(uri => {
      // uri 文件的路径
      console.log(uri)
  })
  .catch(e => console.log(e));

Ionic4.x

import { FileChooser } from '@ionic-native/file-chooser/ngx';

constructor(private fileChooser: FileChooser) { }

...
this.fileChooser.open()
  .then(uri => {
      // uri 文件的路径
      console.log(uri)
  })
  .catch(e => console.log(e));

这时候，你可以使用获得的uri，结合http请求 或者 file-transfer插件进行文件上传。
但是，你在选择图片文件进行上传时，发现会上传失败，具体调试时发现并没上进行文件上传，其实原因是没有找到文件。请继续往下看。

获取文件的实际路径

需要安装插件filePath 文件路径 获取图片文件的实际路径

this.fileChooser.open().then(uri => {
        // uri 文件的路径

        // 你会发现通过此插件，选择图片文件跟选择其他文件(.doc/.xlsx/.docx/.ppt ...)，获得的uri是有区别的
        // 图片文件路径：content://media/....
        // 其他文件路径：file:///storage/....

        // 因此将图片文件转换成实际路径，或者叫绝对路径
        (<any>window).FilePath.resolveNativePath(uri, (result) => {
          this.util.tip(result);
          // 调用文件上传(此方法需要自行编写)
          this.uploadAttachment(result);
        });
      })
      .catch(e => console.log(e));

这时，就能正常上传附件了。

读取选择的图片

有时候你需要刚才选择好的图片，进行下一步的操作。
你可以参考下面的写法

upload(){
   this.fileChooser.open().then((url) => {
      (<any>window).FilePath.resolveNativePath(url, (result) => {
        // 上传文件
        this.uploadFileByPath(filePath);
        // 读取图片
        this.readimage(filePath);
      })
    })
}

uploadFileByPath(filePath){
    // 实现上传的代码
}

readimage(filePath) {
    (<any>window).resolveLocalFileSystemURL(filePath, (res) => {
      res.file((resFile) => {
        var reader = new FileReader();
        reader.readAsArrayBuffer(resFile);
        reader.onloadend = (evt: any) => {
          var imgBlob = new Blob([evt.target.result], { type: 'image/jpeg'});
          // 对图片操作的 业务代码
        }
      })
    })
  }