初学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;">
                        &nbsp;&nbsp;<i ><img src="../../../static/img/file1.png"/>&nbsp;&nbsp;</i>必备要件已上传
                    &nbsp;&nbsp;
                    <i ><img src="../../../static/img/file2.png"/>&nbsp;&nbsp;</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"/>&nbsp;&nbsp;</i><span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']">{{ node.label }}</span>
                                    </span>
                                    <span v-else>
                                      <i ><img src="../../../static/img/file1.png"/>&nbsp;&nbsp;</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"/>&nbsp;&nbsp;</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>&nbsp;{{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>-->
  <!--&lt;!&ndash;<el-button style="margin-left: 10px;" size="medium" type="success" @click="submitUpload">上传到服务器</el-button>&ndash;&gt;-->
  <!--</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 {
    //处理文件,就行,当然可以传其他的参数
}
Logo

前往低代码交流专区

更多推荐