Angular2 / Ionic2:从图库中保存图像并通过mailto作为附件发送

时间:2016-06-21 12:46:31

标签: sqlite angular ionic2 mailto ngcordova

我正在尝试在我的sqlite数据库中保存图像并通过mailto服务发送它。这是我的代码:

takepic() {
    var options = {
        quality: 80,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: false,
        encodingType: Camera.EncodingType.JPEG,
        saveToPhotoAlbum: false
    };

    Camera.getPicture(options).then((data) => {
        var image = document.getElementById('myImage');
        image.src = imageURI;
        this.zone.run(() => this.image = image.src);
        this.storage.query("UPDATE verifyBL SET Thu = '" + this.image + "' WHERE id = 2").then((data) => {
        }, (error) => {
            console.log("ERROR -> " + JSON.stringify(error.err));
        });
    }, (error) => {
        alert(error);
    });
}

当通过mailto发送它时,它看起来像:

(click)="mailIT('mailto:'+post.email +'?body=' +emailText + '&attachment='+imageSC)"

正文文本将正确发送但没有附件。我尝试使用base64版本,但也没有成功。 page1.js上的函数如下所示:

mailIT(passedMail) {
    window.location = passedMail;
}

imsageSC的定义如下:

onPageWillEnter() {
        this.storage.query("SELECT * FROM verifyBL").then((data) => {
            if(data.res.rows.length > 0) {
            this.emailText = data.res.rows.item(1).Sch;
            this.imageSC = data.res.rows.item(1).Thu;
        }
    }, (error) => {
        console.log("ERROR -> " + JSON.stringify(error.err));
    });
}

1 个答案:

答案 0 :(得分:1)

根据规范(RFC 6068),附件无法使用mailto:方案附加到电子邮件中。这就是为什么你的attachment=...被忽略了。如果要添加附件,则必须使用其他方法。这有两个选择。我实际上没有对它们进行测试,但我相信其中任何一种都可以使用:

使用Cordova电子邮件插件和Ionic Native

(注意:this may not be stable。)首先从控制台安装Cordova电子邮件插件和ionic-native插件:

$ ionic plugin add cordova-plugin-email-composer
$ npm install --save ionic-native

然后在你的组件中:

import {Component} from "@angular/core";
import {NavController, Storage, SqlStorage} from "ionic-angular";
import {EmailComposer} from "ionic-native";

@Component({
    templateUrl: "build/pages/mypage/mypage.html"
})
export class MyPage {

    storage: Storage;
    emailText: string;
    imageSC: string;

    constructor(public nav: NavController) {
        this.storage = new Storage(SqlStorage);
        this.storage.query("SELECT * FROM verifyBL").then((data) => {
            if(data.res.rows.length > 0) {
                this.emailText = data.res.rows.item(1).Sch;
                this.imageSC = data.res.rows.item(1).Thu;
            }
        }, (error) => {
            console.log("ERROR -> " + JSON.stringify(error.err));
        });
    }

    mailIt() {
        EmailComposer.isAvailable().then((avail: boolean) => {
            if (available) {
                let email = {
                    to: this.post.email, // not sure where you set this...
                    attachments: [
                        this.imageSC
                    ],
                    body: this.emailText,
                    subject: "Email with attachment",
                    isHtml: true
                };
                EmailComposer.open(email);
            }
        });
    }
}

使用Mailgun

import {Component} from "@angular/core";
import {NavController, Storage, SqlStorage} from "ionic-angular";
import {Http, Request, RequestMethod, Headers, HTTP_PROVIDERS} from "@angular/http";

@Component({
    templateUrl: "build/pages/mypage/mypage.html"
})
export class MyPage {

    storage: Storage;
    emailText: string;
    imageSC: string;
    mailgunUrl: string;
    mailgunApiKey: string;

    constructor(public nav: NavController, private http: Http) {
        this.storage = new Storage(SqlStorage);
        this.storage.query("SELECT * FROM verifyBL").then((data) => {
            if(data.res.rows.length > 0) {
                this.emailText = data.res.rows.item(1).Sch;
                this.imageSC = data.res.rows.item(1).Thu;
            }
        }, (error) => {
            console.log("ERROR -> " + JSON.stringify(error.err));
        });
        this.mailgunUrl = "YOUR_MAILGUN_URL";
        this.mailgunApiKey = window.btoa("api:key-MAILGUN_API_KEY_HERE");
    }

    mailIt() {
        let headers = new Headers();
        headers.append("Authorization", "Basic " + this.mailgunApiKey);
        headers.append("Content-Type", "application/x-www-form-urlencoded");
        this.http.request(new Request({
            method: RequestMethod.Post,
            url: "https://api.mailgun.net/v3/" + this.mailgunUrl + "/messages",
            body: "from=test@example.com&to=" + this.post.email + "&subject=Email+with+attachment&text=" + this.emailText,
            attachment: this.imageSC, // not sure about this, maybe [this.imageSC]
            headers: requestHeaders
        }))
        .subscribe(
            success => { console.log("Success", success);},
            error   => { console.log("Error",   error); }
        );
    }
}