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. 遇到ANR问题的处理步骤

    遇到ANR问题的处理步骤 问题描述 开发中难免会遇到ANR的问题,遇到ANR问题不要想着是因为设备的卡顿出现的问题,我们无法解决,我们应先找到导致ANR的原因,分析原因之后,再来判断这个问题可不可以解 ...

  2. Web前端JQuery面试题（二）

    Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...

  3. [Swift]Alamofire：设置网络请求超时时间【timeout】的两种方式

    两种方式作用相同,是同一套代码的两种表述. 第一种方式:集聚. 直接设置成员属性(全局属性),这种方法不能灵活修改网络请求超时时间timeout. 声明为成员属性: // MARK: - 设置为全局变 ...

  4. 选择IT事业，意味着终身学习

    八月,炎阳如火. 前几天书记找我交流,问我离职的原因,我跟他仔细的分析了一下我的职业发展规划和我对于未来的预期,书记也向我分析了一下他所认为的原因,他说,无外乎是三个原因:第一个是钱的问题:第二个是行 ...

  5. pycharm中配置启动Django项目

    1.先打开mange.py,然后再运行,会提示一堆东西,表示没有配置参数.在pycharm中点击edit configurations 编辑配置参数. 2.点开之后弹出如下对话框,在scrip par ...

  6. Jexus~mono中使用StackExchange.redis的问题

    在windows平台的vs里,添加包包时,可以选择StackExchange.redis,而如果你的应该程序需要部署到linux的mono环境上,使用这个StackExchange.redis是不行的 ...

  7. 课程回顾-Convolutional Neural Networks

    为什么卷积层计算量更低paddingStrided convolution多维卷积LeNet 参数卷积网络的好处参数共享稀疏连接经典网络实现LeNet-5AlexNetVGGResNet残差块iden ...

  8. springboot Aop 统一处理Web请求日志

    1.增加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  9. Singly linked list algorithm implemented by Java

    Jeff Lee blog:   http://www.cnblogs.com/Alandre/  (泥沙砖瓦浆木匠),retain the url when reproduced ! Thanks ...

  10. SaltStack安装配置详解

    一.简介 Saltstack 比 Puppet 出来晚几年,是基于Python 开发的,也是基于 C/S 架构,服务端 master 和客户端 minions :Saltstack 和 Puppet ...