ionic3 filechooser插件小白踩坑歷程

本人是ionic框架的一名小白，之前用ionic3做項目官硝。項目做了一半之后停做了一段時間樊卓，現(xiàn)在繼續(xù)開始庶香。但是發(fā)現(xiàn)，ionic已經(jīng)升級到了ionic4版本简识，但ionic4跟ionic3差別還挺大的，所以我還是選擇用熟悉的ionic3來接著做項目感猛。

最近七扰，身為小白的我在研究怎么在手機上選擇文件并且上傳，想到了兩個思路陪白，一個是用HTML上的：


<input class='file'></input>

這是HTML的經(jīng)典方法颈走，但是本人用這個方法獲取了文件之后就不會怎么上傳了。查了一下大佬的文章咱士，知道了ionic框架下有個專門的方法上傳立由，就是用filechooser插件獲取文件URL，然后用filetransfer來上傳序厉。具體方法參見這位大佬的文檔：

ionic文件上傳

這個文檔將過程寫的很清楚锐膜，但是本人實踐的時候，在filechooser這個插件上遇到了極大的難題：按照官網(wǎng)文檔對這個插件的說明：

File Chooser - Ionic Documentation

在命令行的項目根目錄用


ionic cordova plugin add cordova-plugin-filechooser

npm install @ionic-native/file-chooser

然后在正文中用

import { FileChooser } from '@ionic-native/file-chooser/ngx';
//別忘了要在providers里面加上FileChooser弛房，后面的FileTransfer同理
constructor(private fileChooser: FileChooser) { }

...

this.fileChooser.open()
  .then(uri => console.log(uri))
  .catch(e => console.log(e));

uri就是文件在你手機上的絕對路徑道盏，然后借助FileTransfer實現(xiàn)上傳，要先插入啊文捶，聲明啊什么的跟filechooser是一樣的荷逞。下面是FileTransfer的相關(guān)代碼內(nèi)容：

options = {
    fileKey: 'file',
    fileName: 'name',
    params: {name: filename, type: filetype, model: 'file', author: global.username},
    headers: {}
}
var reqUri = APP_SERVE_URL + '/postimg';    // APP_SERVE_URL是服務(wù)器地址
const fileTransfer: FileTransferObject = this.transfer.create();
fileTransfer.upload(uri, reqUri, options).then((data) => {
    alert('上傳成功');
}, (err) => {
    alert('上傳失敗');
});

我照做了，然而我遇到了這樣的問題粹排，不知道各位有沒有：


Object(...) is not a function

發(fā)現(xiàn)是filechooser有問題种远。這個問題，困擾了我好久顽耳，難道是filechooser插件的具體內(nèi)容寫錯了嗎坠敷？不可能啊，這可是大神寫的啊斧抱。我猜應(yīng)該是版本問題常拓，現(xiàn)在我是ionic3的項目，但是ionic版本是ionic4辉浦，出點這個問題很可能是版本的問題弄抬。

后來我了解了一下插件的原理，發(fā)現(xiàn)問題出在.

\node_modules@ionic-native\file-chooser\ngx\index.js中：


import { Plugin, cordova, IonicNativePlugin } from '@ionic-native/core';

……

FileChooser.prototype.open = function () { return cordova(this, "open", {}, arguments); };
//就是這里cordova(this, "open", {}, arguments)是object(...)宪郊，因此報錯是這里

首先掂恕，這里的cordova是小寫的拖陆，然而在'@ionic-native/core'中只有Cordova，再有懊亡，調(diào)試后發(fā)現(xiàn)Object(...) is not a function說的的確是這里依啰。于是我就改了一下，然后又發(fā)現(xiàn)有好多其他問題……比如：


this.filechooser.open().then() i……s not a function

這里說明open函數(shù)的格式又有問題店枣。速警。。

最后鸯两，對比著FileOpener2的index.js文件的內(nèi)容闷旧，奮斗了好久，終于將這個官方實例實現(xiàn)了钧唐。奮斗過程很復雜忙灼，這里就不吐槽了，最后我改對了钝侠。

我只是改了\node_modules@ionic-native\file-chooser\ngx\index.js這個文件该园，現(xiàn)在發(fā)給各位分享一下，當然帅韧，可能有其他問題里初，各位發(fā)現(xiàn)的話記得私聊：

原來的代碼：

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import { IonicNativePlugin, cordova } from '@ionic-native/core';
var FileChooserOriginal = /** @class */ (function (_super) {
    __extends(FileChooserOriginal, _super);
    function FileChooserOriginal() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    FileChooserOriginal.prototype.open = function () { return cordova(this, "open", {}, arguments); };
    FileChooserOriginal.pluginName = "FileChooser";
    FileChooserOriginal.plugin = "cordova-plugin-filechooser";
    FileChooserOriginal.pluginRef = "fileChooser";
    FileChooserOriginal.repo = "https://github.com/ihadeed/cordova-filechooser";
    FileChooserOriginal.platforms = ["Android"];
    return FileChooserOriginal;
}(IonicNativePlugin));
var FileChooser = new FileChooserOriginal();
export { FileChooser };

現(xiàn)在改為：

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Injectable } from '@angular/core';
import { Plugin, Cordova, IonicNativePlugin } from '@ionic-native/core';
var FileChooser = /** @class */ (function (_super) {
    __extends(FileChooser, _super);
    function FileChooser() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    FileChooser.prototype.open = function () { return Cordova(this, "open", {}, arguments); };
    /*FileChooser.pluginName = "FileChooser";
    FileChooser.plugin = "cordova-plugin-filechooser";
    FileChooser.pluginRef = "fileChooser";
    FileChooser.repo = "https://github.com/ihadeed/cordova-filechooser";
    FileChooser.platforms = ["Android"];*/
    FileChooser.decorators = [
        { type: Injectable },
    ];
    FileChooser.ctorParameters = function () { return []; };
    __decorate([
        Cordova({
            callbackOrder: 'reverse'
        }),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", Promise)
    ], FileChooser.prototype, "open", null); 
    FileChooser = __decorate([
        Plugin({
            pluginName: 'FileChooser',
            plugin: 'cordova-plugin-filechooser',
            pluginRef: 'fileChooser',
            repo: ' https://github.com/ihadeed/cordova-filechooser',
            platforms: ['Android']
        })
    ], FileChooser);
    return FileChooser;
}(IonicNativePlugin));
export { FileChooser };

將文件替換一下，官方的實例就可以用了弱匪。

實際上青瀑，這應(yīng)該是個版本的問題，但是ionic4跟3的差別好像有點大萧诫，我不太想去看斥难，所以就在ionic3里面硬改了，如果有哪個道友跟我一樣懶帘饶，而且遇到了相同的問題哑诊，希望能幫助到大家。

ionic3 filechooser插件 小白踩坑歷程

ionic3 filechooser插件小白踩坑歷程