Vue3使用El-Upload上传文件示例详解

简介

El-Upload组件是一个能够一次性上传多个文件的Vue组件，它的重点在于它良好的用户体验以及它的扩展性。本文将提供Vue3中使用El-Upload组件上传文件所需知道的全部信息，包括基本用法、上传进度、上传限制、上传文件格式的限制，以及如何添加删除已上传文件的功能等等。

基本用法

在Vue3中使用El-Upload上文件十分简单，只需要在Vue模板中引入El-Upload组件即可：

<template>
  <el-upload :action="url" :headers="headers"></el-upload>
</template>

以传递props的方式，可以向组件中传递必要的参数。其中，action属性定义文件上传地址url，headers属性定义上传文件时的请求头。

上传进度

上传文件时需要显示上传进度条以及上传进度的百分比。因此，我们需要通过监听事件来动态更新进度条的值。

<el-upload
  :action="url"
  :headers="headers"
  :on-progress="handleProgress"
>
</el-upload>

<script>
export default {
  data() {
    percent: 0
  },
  methods: {
    handleProgress(event, file, fileList) {
      this.percent = event.percent;
    }
  }
}
</script>

在上述代码中，我们定义了一个handleProgress方法，该方法在进度变化时被自动调用，参数event包含了上传进度以百分比表示，因此我们可以将percent属性更新为event.percent，以便于动态显示上传进度百分比。

上传限制

在实际项目中，有一些上传文件的限制条件，如最大文件大小、最大上传文件数量等。我们也可以通过组件的props属性来很容易地实现这些功能。

<el-upload
  :action="url"
  :headers="headers"
  :before-upload="beforeUpload"
  :limit="2"
  :on-exceed="handleExceed"
>
</el-upload>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!');
        return false;
      }
      return true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制上传个数为 ${this.limit}，请勿超出个数限制!`);
    }
  }
}
</script>

上述代码中使用了limit和on-exceed两个属性，其中limit确定了最大上传文件数2，当超出这个限制时，会自动调用handleExceed方法进行提示。

上传文件格式的限制

通过监听before-upload事件，可以轻松实现上传文件格式的限制。

<el-upload
  :action="url"
  :headers="headers"
  :before-upload="beforeUpload"
>
</el-upload>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const allowedExtensions = [
        '.xls',
        '.xlsx',
        '.ppt',
        '.pptx',
        '.doc',
        '.docx',
        '.pdf'
      ];
      const extension = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
      const allowed = allowedExtensions.indexOf(extension) > -1;
      if (!allowed) {
        this.$message.error(`上传文件格式错误，请选择以下文件类型: ${allowedExtensions.join(', ')}`);
        return false;
      }
      return true;
    }
  }
}
</script>

根据上传文件时的名称获取到文件扩展名，之后根据扩展名进行筛选和验证文件类型。不满足限制条件时，会自动调用this.$message.error方法进行提示。

删除已上传文件功能

在实际开发中，有时候需要对已上传的文件进行删除、保存等功能的操作。我们可以通过slots或者通过自定义模板来实现这个功能。

<el-upload
  :action="url"
  :headers="headers"
  :on-success="onSuccess"
>
  <template slot="default" slot-scope="{ file }">
    <span class="filename">{{ file.name }}</span>
    <i class="el-icon-delete" @click.prevent="handleRemove(file)"></i>
  </template>
</el-upload>

<script>
export default {
  methods: {
    handleRemove(file) {
      const fileList = this.$refs.upload.uploadFiles.filter((item) => {
        return item.uid != file.uid;
      });
      this.$refs.upload.uploadFiles = fileList;
    },
    onSuccess(response, file, fileList) {
      this.$message.success('上传成功！');
    }
  }
}
</script>

在上述代码中，我们使用了自定义的模板来渲染每个上传的文件。每个模板包含了文件名称的展示和删除按钮的操作。handleRemove方法监听了删除按钮元素的点击操作，首先通过filter函数对文件数组进行过滤，将删除元素从数组中除去。

总结

以上就是Vue3中使用El-Upload组件上传文件所需知道的全部信息。根据您的具体需求，El-Upload组件也提供了许多其他的配置选项，欢迎参考官方文档以获取更多的信息和示例。