VUE -- 用組件上傳文件和用xmlrequest上傳

xmlrequest:

sendForm(str, types) {
                var form = this.$refs.ipas_form;
                var oOutput = document.querySelector("div"),
                    oData = new FormData((document.forms.namedItem(str)));

                oData.append("username", "This is some extra data");

                var oReq = new XMLHttpRequest();
                //oReq.open("POST", "https://sddeznsm.com/file?type="+ types +"&app_name="+$("#app_name").val(), true);
                oReq.open("POST", "http://localhost:9000/file?type=" + types + "&app_name=" + form.text, true);
                oReq.onload = function (oEvent) {
                    if (oReq.status == 200) {
                        alert("上傳成功");
                        // oOutput.innerHTML = "Uploaded!";
                    } else {
                        alert("上傳失敗");
                        // oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
                    }
                };

                oReq.send(oData);
            }

 

組件(iview-admin): 

<div style="display: block;width: 100%;text-align: center;">
                    <Upload
                            action="http://localhost:9000/file?type=ipas&app_name=jinan"
                            :on-format-error="handleFormatError"
                            :max-size="204800"
                            :before-upload="handleBeforeUpload"
                            :on-progress="handleProgress"
                            :on-success="handleSuccess"
                            :on-error="handleError"
                    >
                        <span>請選擇文件&nbsp;&nbsp;</span>
                        <Button type="ghost" icon="ios-cloud-upload-outline">上傳文件</Button>
                    </Upload>
                </div>

 

監聽上傳過程:

methods: {
        handleFormatError (file) {
            this.$Notice.warning({
                title: '文件格式不正確',
                desc: '文件 ' + file.name + ' 格式不正確，請選擇圖片文件。'
            });
        },
        handleBeforeUpload (file) {
            this.$Notice.warning({
                title: '文件准備上傳',
                desc: '文件 ' + file.name + ' 准備上傳。'
            });
        },
        handleProgress (event, file) {
            this.$Notice.info({
                title: '文件正在上傳',
                desc: '文件 ' + file.name + ' 正在上傳。'
            });
        },
        handleSuccess (evnet, file) {
            this.$Notice.success({
                title: '文件上傳成功',
                desc: '文件 ' + file.name + ' 上傳成功。'
            });
        },
        handleError (event, file) {
            this.$Notice.error({
                title: '文件上傳失敗',
                desc: '文件 ' + file.name + ' 上傳失敗。'
            });
        },