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. 吴恩达机器学习笔记4-代价函数III(cost function)

    这是代价函数的样子,等高线图,则可以看出在三维空间中存在一个使得

  2. Mybatis框架五：动态SQL

    1.if   where 实现一个简单的需求: 根据性别和名字查询用户: 正常来写: <select id="selectUserBySexAndUsername" para ...

  3. nginx+lua学习

    1. nginx+lua学习 1.1. 网关架构 1.2. nginx命令和信号控制 nginx -s stop 快速关闭,不管有没有正在处理的请求 nginx -s quit 优雅关闭方式,推出前完 ...

  4. 使用redis配置分布式session

    1. spring-redis-session 1.1. 配置 /** * @author laoliangliang * @date 2018/12/21 17:19 */ @Configurati ...

  5. 简单的ld链接脚本学习

    一. 链接脚本的整体认识 什么是链接文件呢?作用是什么呢? 当编写了多个C文件时,我们将他们编译链接成一个可执行的文件,此时就需要用到链接脚本文件(ld).ld脚本主要功能就是:将多个目标文件(.o) ...

  6. IntelliJ IDEA 与 SVN配置

    问题背景 如果开发工具使用的是IntelliJ IDEA,版本管理工具使用的是SVN. 就涉及到SVN集成的问题,但是可能会遇到选择在IDEA中配置SVN的时候,在SVN的安装bin目录找不到文件 s ...

  7. asp.net core mvc发布后显示异常错误信息的方法

    在发布的项目文件夹中找到web.config文件,修改: <aspNetCore processPath="dotnet" arguments=".\Cloud.B ...

  8. SpingBoot 属性加载

    属性加载顺序 配置属性加载的顺序 开发者工具 `Devtools` 全局配置参数: 单元测试上的 `@TestPropertySource` 注解指定的参数: 单元测试上的 `@SpringBootT ...

  9. Spring Boot （四）模板引擎Thymeleaf集成

    一.Thymeleaf介绍 Thymeleaf是一种Java XML / XHTML / HTML5模板引擎,可以在Web和非Web环境中使用.它更适合在基于MVC的Web应用程序的视图层提供XHTM ...

  10. MyEclipse 皮肤、主题、背景色

    第一步:打开myeclipse--->help--->install from site--->Add将路径粘贴在这里.等待安装颜色主题.https://raw.github.com ...