zoukankan      html  css  js  c++  java
  • 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 + ' 上传失败。'
                });
            },
  • 相关阅读:
    Windows Phone学习笔记(6) — — 套接字概述
    Windows Phone学习笔记(4) — — 本地数据库操作
    Windows Phone学习笔记(7) — — TCP套接字
    Windows Phone学习笔记(8) — — UDP套接字
    Windows Phone学习笔记(10) — — 设置页面
    模拟退火摘要
    记 我的第一篇博客
    Splay算法摘要
    调格式专区
    路由器 设置DMZ主机 端口转发 实现外网访问
  • 原文地址:https://www.cnblogs.com/mafeng/p/7715523.html
Copyright © 2011-2022 走看看