今天主要介绍下关于el-upload的知识,并记录下在使用过程中遇到的坑,希望大家都能遇坑化吉哈哈哈哈

element-ui官网:https://element.eleme.cn/#/zh-CN/component/installation

一  自动上传(指点击文件确定后,就调用上传接口上传文件)

<el-upload
  class="upload-demo"
  action="上传要调用的后端接口"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }?`);
      }
    }
  }
</script>

重点:

    accept: 接受上传的文件类型

    on-exceed: 定义超出控制时调用的方法

    action: 上传的地址(请求后端上传的接口)

    auto-upload: 是否在选取文件后立即进行上传(默认是true,自动上传设置为true)

  

二 手动上传

手动上传一定要将auto-upload设置为false,点击弹窗里的确定之后才确定上传。如下所示:

<el-upload
  class="upload-demo"
  ref="upload"
  action="上传文件的后端接口"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  :auto-upload="false"
  :on-change="handelChange"
  :data="dataList"
>
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传xlsx或xls文件,且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      submitUpload() {
        this.$refs['dataList'].validate((valid) => { // 校验上传数据是否合法
            if(valid) {
                this.$refs.upload.submit() // 这个地方的upload要和上面定义的ref一样
                this.importDialog = false
            }        
        }) 
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handlechange(file, fileList) {
      const extention = file.name.substring(file.name.lastIndexOf('.') + 1)
      console.log(extention)
      if (extention !== 'xlsx' && extention !== 'xls') {
        if (fileList.length <= 1) {
          this.$refs.upload.clearFiles()
          // this.fileList = []
          this.$message.warning('仅支持上传文件后缀名为xlsx或xls的Excel文件!')
        } else {
          fileList.splice(fileList.indexOf(file), 1)
          this.$message.warning('仅支持上传文件后缀名为xlsx或xls的Excel文件!')
        }
      }
      if (fileList.length > 1) {
        this.$message.warning('仅支持上传一个Excel文件!')
        fileList.splice(fileList.indexOf(file), 1) // array.indexOf(item,start)item查找的元素 start规定检索的位置(可选),它的合法取值是0-stringObject.length -1
      }
    },
    }
  }
</script>

注意:不管是手动还是自动上传,如果要是加参数,进行上传请求,需要在<el-upload>中添加:data="上传参数"

并且当设置了 :auto-upload="false" 的时候, before-upload是不会被触发的,通常将方法写在 on-change 中做判断

    在手动上传方法中一定不要在使用this.$refs.upload.submit()之后进行this.$refs.upload.clearFiles(),如果这样的话,可能会导致触发不了on-success和on-error事件!

    

参考链接: 

https://blog.csdn.net/qq_18088115/article/details/105598724

https://blog.csdn.net/yangwqi/article/details/101520826

https://blog.csdn.net/m0_46059204/article/details/104944146

https://blog.csdn.net/qq_846784996/article/details/104007972

https://blog.csdn.net/RJN0814/article/details/96606877

https://blog.csdn.net/dujing_15620553271/article/details/102842789

https://blog.csdn.net/DcTbnk/article/details/109455943

https://blog.csdn.net/Sunny_lxm/article/details/89312349

https://blog.csdn.net/qq_40352933/article/details/108593814

https://blog.csdn.net/qq_37025445/article/details/82876745

https://blog.csdn.net/coralime/article/details/108660057

Logo

前往低代码交流专区

更多推荐