ionic3 + hbuilder 文件上傳到 阿里 oss

 import * as OSS from 'ali-oss'


   private clientOss;

    uploadFile(file): Promise<any> {
        return new Promise(((resolve, reject) => {
                this.urlToBlob(file.target).then(dataBlob => {
                    this.clientOss.put(file.name, dataBlob).catch((err) => {
                        if (err) {
                            console.log(err);
                            return;
                        }
                    }).then((result) => {
                        if (result != undefined) {
                            resolve(result)
                        } else {
                            this.showToast('圖片上傳失敗');
                        }
                    })
                })
            })
        )
    }

    uploadImg(path: string[], ossConfig?): Promise<any> {

        //判斷參數是否爲數組
        if (Object.prototype.toString.call(path) !== '[object Array]') {
            throw new Error('參數爲非數組');
        }

        //判斷是否爲支持格式
        path.forEach(item => {
            if (typeof item !== "string") {
                throw new Error('參數爲非數組');
            }
            if (!/(\.jpg$)|(\.jpeg$)|(\.png$)|(\.gif$)|(\.JPG)|(\.PNG)|(\.GIF)|(\.JPEG)/.test(item)) {
                Promise.reject("上傳的圖片格式只能爲jpg或png格式");
                throw new Error("上傳的圖片格式只能爲jpg或png格式");
            }
        });

        this.clientOss = new OSS({
            accessKeyId: ossConfig.AccessKeyId,
            accessKeySecret: ossConfig.AccessKeySecret,
            stsToken: ossConfig.SecurityToken,
            bucket: G_bucket,
            region: G_region,
        });

        const promiseArr: Array<Promise<any>> = []; //上傳文件的數組
        for (let i = 0; i < path.length; i++) {
            let origiSrc = path[i];
            let type = origiSrc.substring(origiSrc.lastIndexOf("."));
            const pro = new Promise((resolve, reject) => {
                //準備上傳
                this.uploadFile(Object.assign({
                    target: path[i],
                    name: new Date().getTime() + type
                })).then(res => {
                    if (res.hasOwnProperty('url') && res.url != "") {
                        resolve(res.url)
                    }
                })
            });
            promiseArr.push(pro);
        }
        return Promise.all(promiseArr);
    }



    /**
     * 直接將url轉換爲 Blob
     */
    urlToBlob(url): Promise<any> {
        return new Promise((resolve, reject) => {
            this.convertFileToDataURLviaFileReader(url, (res) => {
                resolve(this.dataURLtoBlob(res))
            })
        })
    }


    /**
     * 將url 轉換爲 dataUrl
     * @param url
     * @param callback
     */
    convertFileToDataURLviaFileReader(url, callback) {
        let xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        xhr.onload = () => {
            let reader = new FileReader();
            reader.onloadend = () => {
                callback(reader.result);
            }
            reader.readAsDataURL(xhr.response);
        };
        xhr.open('GET', url);
        xhr.send();
    }


    /**
     * 將dataUrl轉換爲 blob
     * @param data_url
     */
    dataURLtoBlob(data_url) {
        let arr = data_url.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type: mime});
    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章