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

Question

我正在尝试将图像保存在我的 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));
    });
}

Answer 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); }
        );
    }
}

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

Angular2/Ionic2: Save Image from gallery and send as attachment via mailto

sqlite

angular

ionic2

mailto

ngcordova

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

使用 Mailgun