欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

elementUI vue upload完整示例

程序员文章站 2023-10-28 15:31:04
elementUI 和vue 还有axios +java的完整示例, 代码敲了很久, 累死了, 以后用就直接复制了 ,很值吧!!! 1.html 2.java 3.效果图 效果图还是不错的吧, 后台java 我就截取了一段代码, 大家可以自己发挥, 前端基本都完整了, 可以完全套用, 大家给个意见吧 ......

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.效果图

elementUI vue upload完整示例elementUI vue upload完整示例

elementUI vue upload完整示例

elementUI vue upload完整示例

elementUI vue upload完整示例

elementUI vue upload完整示例

 

elementUI vue upload完整示例

 

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