• elementui实现只能上传单个文件,选择文件覆盖原有文件


    在elementui 的上传组件中实现单文件上传,使用:limit="1" 属性限制选择文件个数,有个弊端就是当选择完一个文件之后就不能再继续选择文件,这并不是产品经理想要的,我们期望的结果是:当再次选择时直接覆盖上次上传的文件,保证文件列表中只有一个文件。

    • accept属性可以限制文件类型,file-list是文件列表,action绑定文件上传路径
    • 当手动提交文件时,使用this.$refs.upload.submit()来上传文件
    • 选择文件可以触发钩子函数on-change,因此在on-change钩子函数中去操作。
    //组件
    <el-upload class="upload_wrap" ref="upload" action="uploadUrl" accept=".png" :auto-upload="false" 
     :file-list="fileList" :on-progress="onProgress" :on-change="onChange">
     <el-button slot="trigger" type="text"><i class="el-icon-upload" style="font-size:16px"></i>上传文件</el-button>
     <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
     <div slot="tip" class="el-upload__tip">只支持上传.h5文件,文件最大不得超过2G</div>
    </el-upload>
    
    //方法
    // 限制文件上传的个数
      onChange(file, list) {
      	if (list.length > 1 && file.status !== "fail") {
          list.splice(0, 1);
        } else if (file.status === "fail") {
          errorMsg("上传失败,请重新上传!");
          list.splice(0, 1);
        }
     },
    // 上传之前限制文件格式
      beforeUp(file) {
        const isH5 = file.name.split(".")[1] === "png";
        const isLt2G = file.size / 1024 / 1024 / 1024 < 2;
        if (!isH5) {
          errorMsg("仅支持上传.png文件");
    	}
        if (!isLt2G) {
          errorMsg("上传文件大小不能超过 2G!");
        }
        return isH5 && isLt2G;
      },
    submitUpload() {
      this.$refs.upload.submit();
    },
    
    //样式,去掉过渡动画
    .upload_wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    /deep/ .el-list-enter-active,
    /deep/ .el-list-leave-active {
      transition: none;
    }
    
    /deep/ .el-list-enter,
    /deep/ .el-list-leave-active {
      opacity: 0;
    }
    /deep/ .el-upload-list__item-name {
       300px;
    }
    /deep/ .el-upload-list {
      height: 40px;
    }
    
  • 相关阅读:
    get 方式获取ajax
    javascript 面试题目
    原生js 制作选项卡切换效果
    js 回到顶部效果
    php mysql
    浏览器高度 clientHeight 与scrollHeight offsetHeight
    js dom中删除子节点removeChild
    Javascript综合笔记
    Ka贪心大暴走
    Openjudge NOI题库 ch0111/t1794 集合加法
  • 原文地址:https://www.cnblogs.com/dubayaoyao/p/14975680.html
Copyright © 2020-2023  润新知