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.效果图
效果图还是不错的吧, 后台java 我就截取了一段代码, 大家可以自己发挥, 前端基本都完整了, 可以完全套用, 大家给个意见吧!!!
上一篇: win10中开始菜单怎么设置与切换?
下一篇: 秦始皇究竟是谁的儿子?史记上是怎么写的?