如何使用XML / Javascript上传图片？ （NativeScript-Vue）

Question

我正在开发一个NativeScript-vue应用程序，该应用程序需要将图片上传到服务器，但是我不知道如何使用XML进行操作。

我尝试使用nativescript-background-http，但是似乎我需要密码和用户名才能访问服务器，而且我真的不知道如何将其集成到我的代码中。

这是我的主要.Vue文件：

<template>
    <Page class="page">
        <ActionBar class="action-bar">
            <Label class="action-bar-title" text="Home"></Label>
        </ActionBar>

        <GridLayout rows="3*,10, 2*, auto" columns="*, *, *">
            <ListView colSpan="3" for="item in tasks">
                <v-template>
                    <StackLayout>
                        <Label :text="item.description"></Label>
                        <Progress :value="item.upload" :maxValue="item.totalUpload"></Progress>
                        <Label :text="'Uploading: ' + item.upload + ' / ' + item.totalUpload"></Label>
                        <Label :text="'Status: ' + item.status"></Label>
                    </StackLayout>
                </v-template>
            </ListView>
            <StackLayout class="hr-dark" row="1" colSpan="3"></StackLayout>
            <ListView row="2" colSpan="3" for="item in events">
                <v-template let-item="item">
                    <StackLayout>
                        <Label :text="item.eventTitle"></Label>
                        <Label :text="item.eventData" textWrap="true"></Label>
                    </StackLayout>
                </v-template>
            </ListView>
            <Button row="3" margin="2" text="Upload!" @tap="onUploadTap"></Button>
            <Button row="3" col="1" margin="2" text="Error-Up!" @tap="onUploadWithErrorTap"></Button>
            <Button row="3" col="2" margin="2" text="MultiPart-Up!" @tap="onUploadMultiTap"></Button>
        </GridLayout>
    </Page>
</template>

<script>
    const bgHttp = require("nativescript-background-http");
    const fs = require("file-system");
    const platform = require("platform");

    export default {
        data() {
            return {
                tasks: [],
                events: [],
                file: fs.path.normalize(
                    fs.knownFolders.currentApp().path + "/god.jpg"
                ),
                // NOTE: This works for emulator. Real device will need other address.
                url: platform.isIOS ?
                    "http://ipaccovoiturage.000webhostapp.com/pictures" :
                    "http://ipaccovoiturage.000webhostapp.com/pictures",
                session: bgHttp.session("image-upload"),
                counter: 0
            };
        },
        methods: {
            onUploadWithErrorTap: function(e) {
                this.session = bgHttp.session("image-upload");

                this.startUpload(true, false);
            },
            onUploadTap: function(e) {
                this.startUpload(false, false);
            },
            onUploadMultiTap: function() {
                this.startUpload(false, true);
            },
            startUpload: function(shouldFail, isMulti) {
                console.log(
                    (shouldFail ?
                        "Testing error during upload of " :
                        "Uploading file: ") +
                    this.file +
                    (isMulti ? " using multipart." : "")
                );

                const name = this.file.substr(this.file.lastIndexOf("/") +
                    1);
                const description = `${name} (${++this.counter})`;
                const request = {
                    url: this.url,
                    method: "POST",
                    headers: {
                        "Content-Type": "application/octet-stream",
                        "File-Name": name
                    },
                    description: description,
                    androidAutoDeleteAfterUpload: false,
                    androidNotificationTitle: "NativeScript HTTP background"
                };

                if (shouldFail) {
                    request.headers["Should-Fail"] = true;
                }

                let task; // bgHttp.Task;
                let lastEvent = "";

                if (isMulti) {
                    const params = [{
                            name: "test",
                            value: "value"
                        },
                        {
                            name: "fileToUpload",
                            filename: this.file,
                            mimeType: "image/jpeg"
                        }
                    ];
                    task = this.session.multipartUpload(params, request);
                } else {
                    task = this.session.uploadFile(this.file, request);
                }

                function onEvent(e) {
                    if (lastEvent !== e.eventName) {
                        // suppress all repeating progress events and only show the first one
                        lastEvent = e.eventName;
                    } else {
                        return;
                    }

                    this.events.push({
                        eventTitle: e.eventName + " " + e.object.description,
                        eventData: JSON.stringify({
                            error: e.error ? e.error.toString() :
                                e.error,
                            currentBytes: e.currentBytes,
                            totalBytes: e.totalBytes,
                            body: e.data
                        })
                    });

                    this.$set(this.tasks, this.tasks.indexOf(task), task);
                }

                task.on("progress", onEvent.bind(this));
                task.on("error", onEvent.bind(this));
                task.on("responded", onEvent.bind(this));
                task.on("complete", onEvent.bind(this));
                lastEvent = "";

                this.tasks.push(task);
            },
            onItemLoading(args) {
                let label = args.view.getViewById("imageLabel");
                label.text = "image " + args.index;
            }
        }
    };
</script>

确切的错误消息是“不允许对ipaccovoiturage.000webhostapp.com的HTTP通信”。