vue+elment-ui 上传功能(自动上传与手动上传)

今天主要介绍下关于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