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. 【翻译】Neural Collaborative Filtering--神经协同过滤

    [说明] 本文翻译自新加坡国立大学何向南博士 et al.发布在<World Wide Web>(2017)上的一篇论文<Neural Collaborative Filtering ...

  2. Emmet/Zen Coding 快速入门说明

    快速参考 以下是支持的特性: ele creates an HTML element tag 展开一个HTML元素标签 # creates an id attribute 作用于元素标签,展开一个id ...

  3. node的安装及基本使用！

    一.node的基本安装和使用 1.什么是node.js 答:node.js是JavaScript运行环境.实际上它是Google  V8引擎进行了封装.V8引擎执行JavaScript的速度非常的 快 ...

  4. 深入理解OkHttp源码（二）——获取响应

    首先先看一张流程图,该图是从拆轮子系列:拆 OkHttp 中盗来的,如下: 在上一篇博客深入理解OkHttp源码(一)——提交请求中介绍到了getResponseWithInterceptorChai ...

  5. 安装mono和monoDevelop开发环境

    我之前用的是Ubuntu10.12版本的linux,一直被软件更新包困扰,总是保存缺少依赖包的问题!总之在网络上找到的软件更新包地址都不能解决问题.后来就用了比较新的TLS版本Ubuntu14.04. ...

  6. SaltStack安装配置详解

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

  7. 【Flask-RESTPlus系列】Part2：响应编组

    0x00 内容概览 响应编组 基本使用 重命名属性 默认值 自定义字段及多值情况 Url及其他具体字段 复杂结构 列表字段 嵌套字段 api.model()工厂 clone实现复制 api.inher ...

  8. spring-boot(七) 随机端口

    学习文章:springboot小技巧 随机端口 为Spring Cloud的应用实用随机端口非常简单,主要有两种方法: 设置server.port=0,当应用启动的时候会自动的分配一个随机端口,但是该 ...

  9. vue-router 基本使用

    参考原文:http://www.cnblogs.com/SamWeb/p/6610733.html 此链接讲了大部分常用的路由配置及使用,下星期总结

  10. 如何像Python高手(Pythonista)一样编程

    最近在网上看到一篇介绍Pythonic编程的文章:Code Like a Pythonista: Idiomatic Python,其实作者在2006的PyCon会议后就写了这篇文章,写这篇文章的主要 ...