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; 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 + ' 上传失败。'
            });
        },
原文地址:https://www.cnblogs.com/mafeng/p/7715523.html