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完整示例