elementUI 和vue 还有axios +java的完整示例, 代码敲了很久, 累死了, 以后用就直接复制了 ,很值吧!!!

1.html

<!DOCTYPE html>

<html >

<head>

    <meta charset="UTF-8">

    <title>导入</title>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>

<div id="myUpload">

<el-button type="primary" size="mini" @click="uploadFile">导入</el-button>

<!--上传-->

<el-dialog title="上传" width="40%" :visible.sync="uploadTemplateDialog">

    <el-row>

        <el-col :span="22">

            <el-upload class="upload-demo"

                       ref="upload"

                       action=""

                       :accept="acceptFileType"

                       :limit="1"

                       :on-exceed="handleExceed"

                       :before-upload="beforeUpload"

                       :on-preview="handlePreview"

                       :on-remove="handleRemove"

                       :file-list="fileList"

                       :auto-upload="false">

                <el-button slot="trigger" size="small" type="primary">选取Excel格式文件</el-button>

                <div slot="tip" class="el-upload_tip">只能上传.xls文件,且不超过1M</div>

            </el-upload>

        </el-col>

    </el-row>

    <span slot="footer" class="dialog-footer">

        <el-button @click="submitUpload" type="primary" size="mini" :loading="uploadLoading" > 确定上传</el-button>

        <el-button @click="uploadTemplateDialog=false" size="mini">取消</el-button>

    </span>

</el-dialog>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script src="https://unpkg.com/element-ui@2.6.1/lib/index.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script >

    new Vue({

        el:'#myUpload',

        data:function(){

            return{

                uploadTemplateDialog:false,

                fileList:[],

                uploadLoading:false,

                acceptFileType:'.xls',

                downLoadLoading:'',

            }

        },

        //钩子函数,页面加载执行

        created:function(){

        },

        //钩子函数,页面加载完成后执行

        mounted(){

        },

        //函数方法

        methods:{

            uploadFile(){

                this.uploadLoading=false;

                var that=this;

                this.fileList=[];

                this.uploadTemplateDialog=true;

                setTimeout(function(){

                    that.$refs.upload.clearFiles();

                },100);

            },

            handleExceed(files,fileList){

                this.$message.warning('只能选择1个文件!');

            },

            submitUpload(){

                this.uploadLoading=true;

                var that=this;

                setTimeout(function () {

                    if(that.$refs.upload.$children[0].fileList.length==1){

                        that.$refs.upload.submit();

                    }else{

                        that.uploadLoading=false;

                        that.$message({

                            type:'error',

                            showClose:true,

                            duration:3000,

                            message:'请选择文件!'

                        });

                    };

                },100);

            },

            handleRemove(file,fileList){

                //console.log(file,fileList);

            },

            handlePreview(file){

                //console.log(file);

            },

            beforeUpload(file){

                var that=this;

                //文件类型

                var fileName=file.name.substring(file.name.lastIndexOf('.')+1);

                if(fileName!='xls'){

                    that.uploadTemplateDialog=false;

                    that.$message({

                        type:'error',

                        showClose:true,

                        duration:3000,

                        message:'文件类型不是.xls文件!'

                    });

                    return false;

                }

                //读取文件大小

                var fileSize=file.size;

                console.log(fileSize);

                if(fileSize>1048576){

                    that.uploadTemplateDialog=false;

                    that.$message({

                        type:'error',

                        showClose:true,

                        duration:3000,

                        message:'文件大于1M!'

                    });

                    return false;

                }

                that.downloadLoading=that.$loading({

                    lock:true,

                    text:'数据导入中...',

                    spinner:'el-icon-loading',

                    background:'rgba(0,0,0,0.7)'

                });

                let fd=new FormData();

                fd.append('file',file);

                fd.append('_t1',new Date());

                axios({

                    method:'post',

                    url:'/upload/'+new Date().getTime(),

                    data:fd,

                    headers:{"Content-Type":"multipart/form-data;boundary="+new Date().getTime()}

                }).then(rsp=>{

                    that.downloadLoading.close();

                    that.uploadLoading=false;

                    let resp=rsp.data

                    if(resp.resultCode==200){

                        that.uploadTemplateDialog=false;

                        that.$message.success(resp.resultMsg);

                        //that.queryData();//更新数据

                    }else{

                        that.uploadTemplateDialog=false;

                        that.$message({

                            type:'error',

                            showClose:true,

                            duration:60000,

                            message:resp.resultMsg

                        });

                    }

                }).catch(error=> {

                    that.downloadLoading.close();

                    that.uploadLoading=false;

                    that.uploadTemplateDialog=false;

                    that.$message({

                        type:'error',

                        showClose:true,

                        duration:60000,

                        message:'请求失败! error:'+error

                    });

                })

                return false;

            }

        }

    })

</script>

</body>

</html>

2.java

@RequestMapping(value="/upload/{time}",method={RequestMethod.POST})

@ResponseBody

public HttpResult upload(@PathVariable("time") String time,@RequestParam("file") MultipartFile file,HttpServlet request){

        String fileName=file.getOriginalFilename();

        String prefix=fileName.substring(filename.lastIndexOf(".")+1); // 后缀: "xls"

        String path=request.getServletContext().getRealPath(File.separator+"myFile");

        String date=String.valueOf(new Date().getTime());

        if(!new File(path).exists()){

            new File(path).mkdir();

        }

        File file2=new File(path+File.separator+date+"_"+fileName);

        file.transferTo(files);

        return HttpResult.ok();

}

3.效果图

效果图还是不错的吧, 后台java 我就截取了一段代码, 大家可以自己发挥, 前端基本都完整了, 可以完全套用, 大家给个意见吧!!!

elementUI vue upload完整示例的更多相关文章

  1. element-ui(vue)upload组件的http-request方法的使用

    element-ui(vue)upload组件的http-request方法的使用 官方文档: http-request方法有一个默认的参数 content content 是一个object对象:里 ...

  2. elementUI vue tree input 懒加载 输入下拉树型示例 点击其他区域关闭自定义div

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. 【原创】SpringBoot & SpringCloud 快速入门学习笔记(完整示例)

    [原创]SpringBoot & SpringCloud 快速入门学习笔记(完整示例) 1月前在系统的学习SpringBoot和SpringCloud,同时整理了快速入门示例,方便能针对每个知 ...

  4. asp.net mvc5 使用百度ueditor 本编辑器完整示例（下）配置上传播放视频

    通过 asp.net mvc5 使用百度ueditor 本编辑器完整示例(上)介绍,可以上传图片到服务器了,也可以上传小的视频文件,并且由百度编辑器自动加入html5<video>标签播放 ...

  5. 【第四篇】ASP.NET MVC快速入门之完整示例（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  6. WCF服务开发与调用的完整示例

    WCF服务开发与调用的完整示例 开发工具:VS2008 开发语言:C# 开发内容:简单的权限管理系统 第一步.建立WCF服务库 点击确定,将建立一个WCF 服务库示例程序,自动生成一个包括IServi ...

  7. springmvc 项目完整示例06 日志–log4j 参数详细解析 log4j如何配置

    Log4j由三个重要的组件构成: 日志信息的优先级 日志信息的输出目的地 日志信息的输出格式 日志信息的优先级从高到低有ERROR.WARN. INFO.DEBUG,分别用来指定这条日志信息的重要程度 ...

  8. C连接MySQL数据库开发之Linux环境完整示例演示（增、删、改、查）

    一.开发环境 ReadHat6.3 32位.mysql5.6.15.gcc4.4.6 二.编译 gcc -I/usr/include/mysql -L/usr/lib -lmysqlclient ma ...

  9. Struts 2.3.4.1完整示例

    [系统环境]Windows 7 Ultimate 64 Bit [开发环境]JDK1.6.21,Tomcat6.0.35,MyEclipse10 [其他环境]Struts2.3.4.1 [项目描述]S ...

随机推荐

  1. PHP删除当前目录及其目录下的所有文件

    使用PHP遍历一个目录下的所有目录及文件,并删除该目录及其目录下的所有子目录和文件,本次代码通过递归的方式来实现. 用到的函数: scandir($path) 遍历一个目录下所有文件并返回数组. un ...

  2. Python学习笔记【第十三篇】：Python网络编程一Socket基础

    什么是⽹络 网络能把双方或多方连在一起的工具,即把数据从一方传递到另一方进行数据传递. 网络编程就是不同电脑上的软件能够进行数据传递.即进程间的通讯. 什么是TCP/IP协议 协议就是大家一起遵守的约 ...

  3. java mongodb的MongoOptions生产级配置

    autoConnectRetry仅仅意味着驱动程序会自动尝试重新连接到意外断开连接后在服务器(一个或多个).在生产环境中,您通常需要将此设置为true. connectionsPerHost是物理连接 ...

  4. odoo开发笔记--form视图自定义

    form视图自定义的两种场景: 1. 自己重写form视图样式文件 2. form视图,嵌入第三方的系统.

  5. Java核心技术及面试指南 键值对方面的面试题总结以及答案

    3.3.5.1如何遍历HashMap对象?尤其请说明通过Iterator遍历HashMap对象的方法. 建议用这种方式: Set<Entry<String,String>>en ...

  6. Android--UI之ViewStub

    前言 按照最近博客的路线,继续讲Android的UI开发.今天讲解一下ViewStub控件,惰性装载控件.在本篇博客中,将了解到ViewStub的常用属性.方法,以及注意事项.最后将以一个简单的Dem ...

  7. 函数式编程之-模式匹配(Pattern matching)

    模式匹配在F#是非常普遍的,用来对某个值进行分支匹配或流程控制. 模式匹配的基本用法 模式匹配通过match...with表达式来完成,一个完整的模式表达式长下面的样子: match [somethi ...

  8. 不一样的ssm

    这里的ssm不是指的spring+springmvc+mybatis,而是指的spring+springmvc+mongodb,下面我将搭建一个简单的“ssm”框架. 1.新建一个maven项目,骨架 ...

  9. 数据结构(一) 单链表的实现-JAVA

    数据结构还是很重要的,就算不是那种很牛逼的,但起码得知道基础的东西,这一系列就算是复习一下以前学过的数据结构和填补自己在这一块的知识的空缺.加油.珍惜校园中自由学习的时光.按照链表.栈.队列.排序.数 ...

  10. oracle12c创建用户提示ORA-65096：公用用户名或角色无效

    1.背景 以前一直用的是oracle11g,创建用户一直没有问题, 今天在oracle12c上创建用户,报错了.如下图: 我很郁闷, 就打开了oracle官方网站找了下, 发现创建用户是有限制的. 2 ...