ionic2+Angular 使用ng2-file-upload 插件上傳圖片並實現本地預覽

第一步：npm install ng2-file-upload --save 安裝 ng2-file-upload

 

 第二步：在需要使用該插件的頁面的對應module文件的imports中引入CommonModule  和  FileUploadModule

第三步：在對應的組件文件中引入並聲明；

   2017-08-07補充：

 

以下是new FileUploader()需要傳入的參數列表，?號表示可選：

第四步：在組件.ts對應的html文件中添加input標簽；如下：

multiple表示多選；

 

 第五步：在組件.ts文件中創建selectedFileOnChanged()方法，進行圖片選擇之后的操作，例如本地預覽（將selectedImgUrl中的數據綁定到html）等。

 

 第六步：上傳文件

2017-08-07附加刪除圖片的邏輯處理：

大家可以參考一下選擇的圖片在uploader:FileUploader中的存儲規則

 

 

第七步：完成圖例：

 

 

 后記：2017-07-21 10：44

如果出現下圖的錯誤，肯能是因為沒有導入第二步中的相關文件，也有可能是因為在第四步的input元素設置中缺少了ng2FileSelect

 

 

 2017-08-07 17:00補充邏輯處理的代碼：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FileUploader } from 'ng2-file-upload';

@IonicPage({
    name: 'orderEvaluate',
    segment: 'orderEvaluate'
})

@Component({
    selector: 'page-order-evaluate',
    templateUrl: 'order-evaluate.html',
})
export class OrderEvaluatePage {

    public uploader: FileUploader = new FileUploader({ url: '圖片上傳地址' });
    selectedImgUrl: any[] = [];//存儲已經選擇的圖片
    selectedImgLength = 0;

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams) {
    }

    removeUpload(img) {
        //刪除圖片
        this.uploader.queue[img.uploadID].remove();
        this.selectedImgUrl.splice(img.uploadID, 1);

        this.selectedImgUrl.forEach((up, i) => {
            up.uploadID = i//重構與上傳數據一致的結構
        });

        this.selectedImgLength = this.uploader.queue.length;
        console.log(this.uploader);
    }

    selectedFileOnChanged(index: number) {
        //選擇圖片
        let $this = this;//區別於new FileReader()中的this
        let selectedArr = this.selectedImgUrl;//存儲選擇的圖片並進行標記存儲
        this.uploader.queue.forEach((q, i) => {
            //this.selectedImgLength記錄已選擇的總的圖片數量。並根據此來判斷圖片如何進行存儲；
            if (this.selectedImgLength == 0 || i > this.selectedImgLength - 1) {
                let reader = new FileReader();
                reader.readAsDataURL(q.some);//生成base64圖片地址，實現本地預覽。只是same屬性被protected修飾，需要修改。
                reader.onload = function () {
                    let imgs = {
                        url: this.result,//當前選擇的圖片生成的base64圖片地址
                        uploadID: i,//該圖片在隊列中的位置標記
                        pIndex: index//當前上傳的圖片所屬，因為如果是訂單評價的話，會存在多個商品，index就是標記上傳的是哪個商品的評價圖。
                    };
                    if (selectedArr.length > 0) {
                        let isSame = false;//標識是否選擇過同一張圖片
                        selectedArr.forEach((img, j) => { if (img.url == this.result) { isSame = true; } });
                        if (!isSame) {
                            //避免選擇相同的圖片
                            selectedArr.push(imgs);
                        } else {
                            $this.uploader.queue[i].remove();//如果已經選擇，就需要在隊列中移除該圖片
                            $this.selectedImgLength = $this.uploader.queue.length;//並更新已選圖片數量
                        }
                    } else { selectedArr.push(imgs) }
                }
            }
        });
        this.selectedImgLength = this.uploader.queue.length;
    }

    uploadImg() {
        let $this = this;
        this.selectedImgUrl.forEach((img, i) => {
            //在上傳的this.uploader隊列中標記圖片所屬；根據項目需求        
            //如果同時對多個商品進行評價並上傳圖片，所有商品選擇的圖片是存儲在同一個數組中，
            //所以上傳之前需要標識屬於哪個商品，上傳成功之后返回的數據同樣會帶有標識
            this.uploader.queue[i]['pIndex'] = img.pIndex;
        });


        this.uploader.uploadAll() // 開始上傳
        this.uploader.onSuccessItem = (item, res, status, headers) => {
            // 單張圖片上傳文件成功  
            //上傳多張圖片的話會執行多次
            if (status == 200) {
                // 上傳文件成功后獲取服務器返回的數據
                //根據項目需求處理返回來的數據；
            } else {
                // 上傳文件后獲取服務器返回的數據錯誤   
            }
        };
        this.uploader.onCompleteAll = function () {
            //uploader: FileUploader服務是單張上傳圖片，
            //onCompleteAll可以檢測到圖片全部上傳完成
            //全部圖片上傳結束
            //一般上傳圖片和上傳其他評價的信息接口都是分開的，可以在此方法中構建需要上傳的數據模型並調取相關接口
            //over
        }
    }
}