element+vue+java檔案上傳
阿新 • • 發佈：2018-12-21
初學element,開始做檔案上傳看element的官方文件發覺東西太少了,看不懂,去看了幾篇帖子發現貼過來的程式碼也沒辦法用.
經過自己學習,終於寫出來了,可以留一個記錄,也方便初學者使用.
裡面的方法請求路徑與引數已經刪除,自己修改.
這是上傳的前端程式碼,這是一個彈出框.如果不需要,可以去除最外層的dialog
這主要是一個樹形選單載入,然後節點上有對應的上傳按鈕或者下載,刪除,預覽,重新命名等功能,預覽需要使用一個外掛v-viewer
安裝命令可自行根據版本號百度,當然只需要上傳功能的話
<template> <div id="init_box"> <el-row style="height: 100%;width: 100%"> <!--左側--> <div id="left_box" style="height: 100%;float: left"> <!-- 標題 --> <div style="width: 100%;height: 50px;text-align: center"> <div style="border-radius:2px;margin:0 auto;background-color: #D9EBFF;border: #C3E1FF 1px solid;height: 30px;width: 90%;margin-top: 10px;text-align: center"> <span id="file_box_title" style="display: block;font-size: 14px;margin-top: 4px;"> <i ><img src="../../../static/img/file1.png"/> </i>必備要件已上傳 <i ><img src="../../../static/img/file2.png"/> </i>必備要件未上傳 </span> </div> </div> <!-- 樹形選單 --> <div id="tree_box" class="tree_box" style="width: 350px;overflow-x:auto;overflow-y:auto"> <el-row id="tree_box" class="slot-tree" style="width: 100%" type="flex"><!--type="flex"--> <el-tree class="slot-tree" style="font-size: 17px;" v-if="isLoadingTree" node-key="id" ref="tree" highlight-current :data="treeData" :props="defaultProps" @node-click="show"> <span class="slot-t-node" slot-scope="{ node, data }"> <!--設定節點名稱和節點的圖示--> <span v-if="data.level==1"> <span v-if="data.children.length==0"> <i ><img src="../../static/img/file2.png"/> </i><span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']">{{ node.label }}</span> </span> <span v-else> <i ><img src="../../../static/img/file1.png"/> </i><span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']">{{ node.label }}</span> </span> </span> <span v-else> <i ><img src="../../../static/img/file3.png"/> </i><span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']">{{ node.label }}</span> </span> <!--設定節點的操作按鈕--> <span v-show="!node.isEdit" style="position:absolute;left:20%;"> <!--如果是根節點則只有新增按鈕，如果不是則有編輯、下載和刪除按鈕--> <span class="slot-t-icons" v-if="data.level==1"> <!-- 檔案上傳按鈕 --> <el-button type="primary" plain @click="NodeAdd(node, data)" size="mini">上傳</el-button> <!--<el-button icon="el-icon-plus" circle :size="iconSize" type="success" @click="NodeAdd(node, data)"></el-button>--> </span> <span class="slot-t-icons" v-else-if="data.level==2"> <!-- 預覽按鈕 --> <el-button type="primary" plain @click="preview(node, data)" size="mini">預覽</el-button> <!--<el-button icon="el-icon-view" circle :size="iconSize" type="primary" @click="preview(node, data)"></el-button>--> <!-- 編輯按鈕 --> <el-button type="primary" plain @click="NodeEdit(node, data)" size="mini">重新命名</el-button> <!--<el-button icon="el-icon-edit" circle :size="iconSize" type="primary" @click="NodeEdit(node, data)"></el-button>--> <!-- 下載按鈕 --> <el-button type="primary" plain @click="downLoadFile(node, data)" size="mini">下載</el-button> <!--<el-button icon="el-icon-download" circle :size="iconSize" type="primary" @click="downLoadFile(node, data)"></el-button>--> <!-- 刪除按鈕 --> <el-button type="primary" plain @click="NodeDel(node, data)" size="mini">刪除</el-button> <!--<el-button icon="el-icon-delete" circle :size="iconSize" type="warning" @click="NodeDel(node, data)"></el-button>--> </span> </span> </span> </el-tree> </el-row> </div> </div> <!-- 中線 --> <div id="center_box" style="height: 100%;width: 20px;float: left"> <div style="width: 1px;height: 100%;background-color: #D5D8DD"></div> </div> <!-- 右側 --> <div id="right_box" style="height: 100%;float: left"> <el-container style="width: 100%;height: 100%"> <div style="width: 100%;height: 100%;"><!--style="width: 100%;"--> <div id="showImg_box" style="text-align:left; float:left;width: 100%;height: 100%"> <div id="showImg_box_title" style=";height: 30px;background-color: #F0F8FF;text-align:center;line-height:30px;margin-top: 10px"> <span style="vertical-align: middle;">檔案詳情</span> </div> <el-row class="file_m" style="width: 100%;height: 100%;margin-top: -30px"> <!--<div id="filePath" style="height: 3%;padding-left:4px">--> <!--<p><span> {{filePath}}</span></p>--> <!--</div>--> <iframe v-if="pdfVisible" :src="fileSrc" style="width: 100%;height: 100%" id="previewIframe" frameborder="false" scrolling="no" allowtransparency="true"></iframe><!--frameborder="false" scrolling="no" allowtransparency="true"--> <div v-if="imageVisible" id="showImg" style="width: 100%;height: 100%" v-viewer="{inline:true,navbar:false}"> <img id="img" :src="fileSrc" :key="src" style="display: none;width: 100%;height: 100%"> </div> </el-row> </div> </div> </el-container> </div> <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" append-to-body> <el-form :model="form" :rules="formRules" ref="form"> <el-form-item label="新檔名" prop="fileName" :label-width="formLabelWidth"> <el-input id="changeInput" v-model="form.fileName" autocomplete="off"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="closeRenameDialog('form')">取 消</el-button> <el-button type="primary" @click="fileRenameSubmit">確 定</el-button> </div> </el-dialog> <!--檔案上傳Dialog對話方塊--> <el-dialog width="490px" :title="uploadDialogTitle" :visible.sync="uploadDialogVisible" @close="closeUploadDialog" append-to-body> <div id="uploadDialog" style="margin:0 auto;width: 100%;height: 500px;text-align: center"> <div id="file" style="text-align: left;margin:0 auto;width: 80%;height: 500px;"> <el-upload class="" style="width: 100%" ref="upload" :data="uploadParam" :before-remove="beforeRemove" :on-preview="handlePreview" :on-error="uploadError" :on-success="uploadSuccess" :on-remove="handleRemove" :on-preview="handlePreview" :file-list="fileList" drag :action="uploadUrl" multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">將檔案拖到此處，或<el-button @click="selectFile" type="primary" size="mini">點選上傳</el-button></div> <div style="margin-left: 5px;width: 100%;text-align: left" slot="tip"> <div style="width: 100%;height: 30px;font-size: 16px"><span style="vertical-align: middle;">檔案列表</span></div> </div> </el-upload> </div> </div> <div id="endUpload" style="text-align:left;width: 100%;height: 40px"> <div style="width: 100%;height: 60px;font-size: 16px"> <div style="width: 100%;height: 30px;font-size: 16px;padding: 30px 0px 0px 0px"> <el-button type="text" style="font-size: 16px;color: #7A7BB5" @click="changeStyle()"><span>顯示全部檔案</span></el-button> </div> </div> </div> </el-dialog> </el-row> </div> </template> <script> import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewer' Vue.use(Viewer); export default { name: "FileManagement", props: ['token', 'modeId', 'fileCategoryId', 'iid','width','height'], mounted:function () { this.loadTree(); this.styleInit(); }, data() { return { fileNameList:[], rootPath:'http://localhost:8089/FileManagement',//根路徑 maxexpandId: 95,//新增節點開始id non_maxexpandId: 95,//新增節點開始id(不更改) isLoadingTree: true,//是否載入節點樹 iconSize: 'mini', defaultProps: { id:'id', fileType:'fileType', showUrl:'showUrl', changeUrl:'changeUrl', label: 'label', children: 'children', isEdit:'isEdit', ip:'ip', port:'port', }, treeData: [{id:'1',label:'根目錄',level:'1',fileType:'',children:[{id:'1.1',label:'檔案1',level:'2',},{id:'1.2',label:'檔案2',level:'2'},{id:'1.3',label:'檔案3',level:'2',},{id:'1.4',label:'檔案4',level:'2',},{id:'1.5',label:'檔案5',level:'2',}]}],//樹元件資料集 // 檔案重新命名對話方塊屬性 dialogTitle: '檔案重新命名', dialogFormVisible: false, form: { fileData: {},//檔案的Id fileName: '', }, formRules: { fileName: [ {required: true, message: '請輸入新的檔名稱', trigger: 'blur'} ], }, interfaceName2:"", methodName2:"upload", fileName2:"", formLabelWidth: '100px', //檔案上傳對話方塊屬性 selectedNodeData: {}, temporaryFile:"", mode_id:"", uploadUrl:"http://localhost:8089/FileManagement/upload",//這個就是檔案上傳的url,在loadTree方法可以對他賦值,也可以寫死 uploadParam:{'這個可以在上傳方法裡面同時攜帶其他引數'}, upLoadData: { interfaceName:"", methodName:"upload" }, uploadDialogTitle: '新增附件', uploadDialogVisible: false, uploadForm: {}, uploadFormRules: {}, fileList: [], uploadFileList: [], //檔案預覽 filePath: '檔案路徑：', pdfVisible:false, imageVisible:false, fileSrc: '',//檔案預覽的地址 //頁面自適應引數 fixStyle: '', port:'', ip:'' } }, methods: { styleInit () { var width = 1200; var height = 700; $("#init_box").css("width",width); $("#init_box").css("height",height); $("#left_box").css("width",350); $("#right_box").css("width",width-370); $("#tree_box").css("height",height-60); $("#showImg_box_title").css("width",width-370); //預覽視窗大小 $("#previewIframe").css("height",height); $("#showImg").css("height",height); $("#img").css("height",height); }, //載入電子附件樹型列表 loadTree(){ let self=this; //初始化上傳地址 self.uploadUrl = self.getRootPath() + "/upload"; //console.info(self.getRootPath()); //組裝引數 let param=[]; $.ajax({ type:'post', url: dbUrl, data:{args:param}, async: false, success:function (data) { if(!!data.result) { var a = JSON.parse(data.result); self.treeData = a; } }, error:function(){ self.$alert('請求異常', '異常提示', { confirmButtonText: '確定', type: 'error' }); } }) }, getRootPath() { //獲取當前網址，如： http://localhost:8088/test/test.jsp var curPath = window.document.location.href; //獲取主機地址之後的目錄，如： test/test.jsp var pathName = window.document.location.pathname; var pos = curPath.indexOf(pathName); //獲取主機地址，如： http://localhost:8088 var localhostPath = curPath.substring(0, pos); //獲取帶"/"的專案名，如：/test var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1); return (localhostPath + projectName);//釋出前用此 // return (localhostPath);//釋出後用此 }, // 檔案上傳 NodeAdd(n, d) {//新增節點 this.fileNameList = []; this.uploadDialogVisible = true; this.selectedNodeData = d; this.mode_id = d.id; this.uploadParam.token = 'token'; this.uploadParam.modeId = d.id; this.uploadParam.ip = d.ip; this.uploadParam.port = d.port; setTimeout(() => { this.showSelect(); },0) }, //上傳裂變滾動條 showSelect() { $("#uploadDialog").height(500); $("#endUpload").show(); document.getElementById("file").getElementsByTagName("ul")[0].style['height'] = '300px'; document.getElementById("file").getElementsByTagName("ul")[0].style['overflow'] = 'auto'; }, //改變進度條 changeStyle(){ var count = document.getElementById("file").getElementsByTagName("li").length; var height = count * 31; if(height >300){ var result2 = 240+height+'px'; var result = height+"px"; $("#uploadDialog").height(result2); $("#endUpload").hide(); document.getElementById("file").getElementsByTagName("ul")[0].style['height'] = result; }else{ $("#endUpload").hide(); } }, //觸發檔案上傳 selectFile() { $("#selectFile").click(); }, //執行上傳 submitUpload() { this.$refs.upload.submit(); }, // 上傳成功後的回撥 uploadSuccess(response, file, fileList) { this.fileList = fileList; //1.將檔案的節點資料新增到數列表中 let newChild = JSON.parse(response.result); if (!this.selectedNodeData.children){ this.$set(this.selectedNodeData, 'children', []); } this.selectedNodeData.children.push(newChild); //this.showSelect(); var name1 = file.url; var id = newChild.id; var tab = {'url':name1,'id':id}; this.fileNameList.push(tab); }, // 上傳錯誤 uploadError(response, file, fileList) { alert("上傳失敗，請重試！"); }, //點選檔案上傳對話方塊右上方的關閉按鈕觸發，詢問是否刪除已上傳的檔案 closeUploadDialog(done) { //清除資料並關閉上傳對話方塊 this.selectedNodeData = {}; this.fileList = []; this.$refs.upload.clearFiles(); this.fileNameList = []; }, //檔案預覽 show(node){ let self = this; self.fileSrc = ""; if(node.level == 2){ //1.首先判斷檔案的型別，只有圖片和pdf支援預覽,如果不是圖片或pdf檔案則不預覽 let fileType = node.fileType; if (fileType != 'jpg' && fileType != 'png' && fileType != 'gif' && fileType != 'jpeg' && fileType != 'bmp' && fileType != 'pdf') { self.$alert('對不起！系統只支援預覽圖片和pdf檔案', '系統提示', { confirmButtonText: '確定', type: 'error' }); self.filePath = node.showUrl; self.pdfVisible = false; self.imageVisible = false; return } //2.顯示檔案的節點路徑 // let parentLabel = n.parent.data.label; // self.filePath = "檔案路徑："+parentLabel+" / "+n.data.label; //3.請求檔案 //console.log(node.showUrl); self.fileSrc = node.showUrl; if (fileType == 'pdf'){ self.imageVisible = false; self.pdfVisible = true; }else{ self.pdfVisible = false; self.imageVisible = true; } } }, preview(n,d){ let self = this; self.fileSrc = ""; if(d.level == 2){ //1.首先判斷檔案的型別，只有圖片和pdf支援預覽,如果不是圖片或pdf檔案則不預覽 let fileType = d.fileType; if (fileType != 'jpg' && fileType != 'png' && fileType != 'gif' && fileType != 'jpeg' && fileType != 'bmp' && fileType != 'pdf') { self.$alert('對不起！系統只支援預覽圖片和pdf檔案', '系統提示', { confirmButtonText: '確定', type: 'error' }); self.filePath = d.showUrl; self.pdfVisible = false; self.imageVisible = false; return } //2.顯示檔案的節點路徑 let parentLabel = n.parent.data.label; self.filePath = "檔案路徑："+parentLabel+" / "+n.data.label; //3.請求檔案 //console.log(n.data.showUrl); self.fileSrc = n.data.showUrl; if (fileType == 'pdf'){ self.imageVisible = false; self.pdfVisible = true; }else{ self.pdfVisible = false; self.imageVisible = true; } } }, //檔案重新命名 NodeEdit(n, d) { this.dialogTitle = "檔案重新命名【 " + d.label + " 】"; this.dialogFormVisible = true; this.form.fileData = d; var file = d.fileType; var filename = d.label; var i = filename.lastIndexOf("."+file); this.form.fileName = filename.substring(0,i); }, fileRenameSubmit() { let self = this; self.$refs.form.validate((valid) => { if (valid) { //1.首先校驗舊檔名和新檔名是否同名，如果是則提示 let oldName = self.form.fileData.label; let newName = self.form.fileName+"."+self.form.fileData.fileType; if (oldName === newName){ self.$alert("新檔名和原檔名同名", '系統提示', { confirmButtonText: '確定', type: 'warning', callback: function () { return; } }); } var dbUrl = self.$API.ajaxPath; var userId = self.$.cookie("userId"); let param=[]; param.push(this.token); param.push(userId);//user_id param.push(self.form.fileData.id);//file_id param.push(self.form.fileName);//新的檔名 $.ajax({ type:'post', url:dbUrl, data:{ args:param }, success:function (data) { if (data.status == "0") { self.$alert("檔案重新命名成功", '系統提示', { confirmButtonText: '確定', type: 'success', callback: function () { //修改樹列表中被修改的檔案的檔名 self.form.fileData.label = newName; } }); self.dialogFormVisible = false; } else { self.$alert("檔案重新命名失敗", '系統提示', { confirmButtonText: '確定', type: 'warning', callback: function () { self.closeRenameDialog('form'); } }); } } }) } }); }, //取消檔案重新命名 closeRenameDialog(formName) { this.$refs[formName].resetFields(); this.dialogFormVisible = false; }, //檔案下載 downLoadFile(n,d) { let self = this; let fileName = d.label; let fileId = d.id; let param=[]; var downloadPath = self.$API.downloadPath; param.push(this.token); param.push(fileId); window.location.href=self.getRootPath()+"/download?token=&fileName="+d.label+"&file_id="+fileId; }, //刪除檔案 NodeDel(n, d) { let self=this; self.$confirm('此操作將永久刪除該附件, 是否繼續?', '提示', { confirmButtonText: '確定', cancelButtonText: '取消', type: 'warning' }).then(() => { //組裝請求引數 var dbUrl = self.$API.ajaxPath; var userId = self.$.cookie("userId"); let param=[]; param.push(this.token); param.push(userId); param.push(d.id); $.ajax({ type: "POST", async:true, url: dbUrl, data:{args:param}, success: function(data) { // console.log(JSON.stringify(data)); if (data.status == 0){ // $("#img").attr("src",""); // $("#previewIframe").attr("src",""); //刪除成功之後，將樹列表中的檔案的節點刪除 self.$refs.tree.remove(n); //最後彈出成功刪除提示框 self.$message({ type: 'success', message: '刪除成功!' }); }else { self.$message({ type: 'warning', message: '刪除失敗!' }); } }, error: function(e) { self.$message({ type: 'error', message: e.message }); } }); }).catch(() => { self.$message({ type: 'info', message: '已取消刪除' }); }); }, handlePreview(file) { //點選事件 }, beforeRemove(file, fileList) { return this.$confirm(`確定移除 ${ file.name }？`); }, handleRemove(file, fileList) { let self=this; //組裝請求引數 var dbUrl = self.$API.ajaxPath; var userId = self.$.cookie("userId"); let param=[]; var list = this.fileNameList; var url = file.url; var id=''; for(var i=0;i<list.length;i++){ if(list[i].url == url){ id = list[i].id; } } param.push(this.token); param.push(userId); param.push(id); $.ajax({ type: "POST", url: dbUrl, data:{args:param}, success: function(data) { if (data.status == 0){ //刪除成功之後，將樹列表中的檔案的節點刪除 let treeObj = self.$refs.tree; treeObj.remove(treeObj.getNode(id)); //最後彈出成功刪除提示框 self.$message({ type: 'success', message: '刪除成功!' }); }else { self.$message({ type: 'warning', message: '刪除失敗!' }); } }, error: function(e) { self.$message({ type: 'error', message: e.message }); } }); }, //iframe自適應高度 reinitIframe(){ var iframe = document.getElementById("previewIframe"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.min(bHeight, dHeight); iframe.height = height; }catch (ex){ console.log(ex); } //setInterval("reinitIframe",1000); }, //頁面自適應視窗大小 pageAdapter(){ window.onresize = () => { const windowWidth = document.body.clientWidth const windowHeight = document.body.clientHeight const windowAspectRatio = windowHeight / windowWidth let videoWidth let videoHeight if (windowAspectRatio < 0.5625) { videoWidth = windowWidth videoHeight = videoWidth * 0.5625 this.fixStyle = { height: windowWidth * 0.5625 + 'px', width: windowWidth + 'px', 'margin-bottom': (windowHeight - videoHeight) / 2 + 'px', 'margin-left': 'initial' } } else { videoHeight = windowHeight videoWidth = videoHeight / 0.5625 this.fixStyle = { height: windowHeight + 'px', width: windowHeight / 0.5625 + 'px', 'margin-left': (windowWidth - videoWidth) / 2 + 'px', 'margin-bottom': 'initial' } } } window.onresize(); }, }, } </script> <style scoped> .file_m{ width: 100%; height: 100%; margin: 0 auto; /*padding: 1em;*/ /*max-width: 600px;*/ /*overflow-y: auto;*/ } .el-upload-list::-webkit-scrollbar {/*滾動條整體樣式*/ width: 4px; /*高寬分別對應橫豎滾動條的尺寸*/ height: 4px; } .el-upload-list::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2); } .el-upload-list::-webkit-scrollbar-track {/*滾動條裡面軌道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0; background: rgba(0,0,0,0.1); } /*----*/ /*滾動條樣式*/ .tree_box::-webkit-scrollbar {/*滾動條整體樣式*/ width: 4px; /*高寬分別對應橫豎滾動條的尺寸*/ height: 4px; } .tree_box::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2); } .tree_box::-webkit-scrollbar-track {/*滾動條裡面軌道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0; background: rgba(0,0,0,0.1); } .fileList{ background-color: #cc85d9; width: 100%; /*position: absolute;*/ top: 30px; bottom: 0px; left: 0px; } .operation{ border: 1px; } /*樹樣式*/ .slot-tree .slot-t-top{ margin-bottom: 15px; } .slot-tree .slot-t-node span{ display: inline-block; font-size: 18px; } /*節點*/ .slot-tree .slot-t-node--label{ font-weight: 600; } /*輸入框*/ .slot-tree .slot-t-input .el-input__inner{ height: 26px; line-height: 26px; } /*按鈕列表*/ .slot-tree .slot-t-node .slot-t-icons{ display: none; margin-left: 10px; } .slot-tree .slot-t-icons .el-button+.el-button{ margin-left: 6px; } .slot-tree .el-tree-node__content:hover .slot-t-icons{ display: inline-block; } /*檔案上傳樣式*/ .tool-bar{ height: 25px } .file-list{ width: 100%; min-height: 100px; max-height: 300px; overflow: auto } /*圖片預覽樣式*/ .images{ width: 100%; height: 650px; } form { width:80%; margin:auto; padding:20px 50px; border:1px solid #0091f2; border-radius:10px; display:block; } input { font-size:24px; margin:10px; } .clear { clear:both; } .speed_box { width:600px; height:20px; display:none; border:1px solid #0091f2; border-radius:10px; overflow:hidden; } #file_box { min-width:600px; min-height:300px; border:1px solid #0091f2; border-radius:10px; display:inline-block; background:#EEE; overflow:hidden; z-index:999999; } #speed { width:0; height:100%; background:#0091f2; color:white; text-align:center; line-height:20px; font-size:16px; } #file_size,#file_type { display:inline-block; padding:0px 16px; font-size:16px; color:#0091f2; font-weight:bold; } #file_type { margin-top:30px; } .opts_btn { position:relative; display:inline-block; padding:8px 16px; font-size:16px; color:white; text-decoration:none; background:#0091f2; border:2px solid #0091f2; border-radius:3px; cursor:pointer; overflow:hidden; } .oFile { position:absolute; width:100%; height:100%; z-index:10; top:0px; left:0px; opacity:0; } .send_btn { display:inline-block; display:none; float:right; margin-top:20px; padding:8px 16px; font-size:16px; color:white; background:#0091f2; border:1px solid transparent; border-radius:2px; cursor:pointer; } </style>
當然只需要上傳功能的話,擷取這段程式碼,對應的方法就可以了
<el-dialog width="490px" :title="uploadDialogTitle" :visible.sync="uploadDialogVisible" @close="closeUploadDialog" append-to-body> <!--<div class="tool-bar">--> <!--<el-button type="primary" size="medium" @click="selectFile">選取檔案</el-button>--> <!--<!–<el-button style="margin-left: 10px;" size="medium" type="success" @click="submitUpload">上傳到伺服器</el-button>–>--> <!--</div>--> <!--<div class="file-list">--> <!--<el-upload--> <!--class="upload-demo"--> <!--multiple--> <!--ref="upload"--> <!--:action="uploadUrl"--> <!--:data="uploadParam"--> <!--:on-success="uploadSuccess"--> <!--:on-error="uploadError"--> <!--:on-preview="handlePreview"--> <!--:before-remove="beforeRemove"--> <!--:on-remove="handleRemove"--> <!--:file-list="fileList"--> <!--:auto-upload="true">--> <!--<el-button slot="trigger" type="primary" id="selectFile" style="display: none">選取檔案</el-button>--> <!--</el-upload>--> <!--</div>--> <div id="uploadDialog" style="margin:0 auto;width: 100%;height: 500px;text-align: center"> <div id="file" style="text-align: left;margin:0 auto;width: 80%;height: 500px;"> <el-upload class="" style="width: 100%" ref="upload" :data="uploadParam" :before-remove="beforeRemove" :on-preview="handlePreview" :on-error="uploadError" :on-success="uploadSuccess" :on-remove="handleRemove" :on-preview="handlePreview" :file-list="fileList" drag :action="uploadUrl" multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">將檔案拖到此處，或<el-button @click="selectFile" type="primary" size="mini">點選上傳</el-button></div> <div style="margin-left: 5px;width: 100%;text-align: left" slot="tip"> <div style="width: 100%;height: 30px;font-size: 16px"><span style="vertical-align: middle;">檔案列表</span></div> </div> </el-upload> </div> </div> <div id="endUpload" style="text-align:left;width: 100%;height: 40px"> <div style="width: 100%;height: 60px;font-size: 16px"> <div style="width: 100%;height: 30px;font-size: 16px;padding: 30px 0px 0px 0px"> <el-button type="text" style="font-size: 16px;color: #7A7BB5" @click="changeStyle()"><span>顯示全部檔案</span></el-button> </div> </div> </div> </el-dialog>
java後端的檔案上傳接收程式碼
@RequestMapping(value="/upload",method= RequestMethod.POST)
@ResponseBody
public ResponseBase upload( @RequestParam("file") MultipartFile file) throws Exception {
//處理檔案,就行,當然可以傳其他的引數
}