Element el-upload上传组件使用详解

在本文中，我们将深入了解Element UI中的el-upload上传组件的使用方法。通过本文的学习，您将会掌握el-upload的使用方法，并能在自己的网站中快速使用和配置el-upload组件。

简介

el-upload是Element UI框架中的一个上传组件。它提供了用于上传文件的界面，以及一些功能来控制和处理上传的文件。el-upload可以被用于上传文件，同时也支持上传的进度条监控功能。

具体使用方法

安装

在使用el-upload组件之前，您应该先在您的项目中安装Element UI框架。如果您还没有安装Element UI框架，请参考官方文档安装。

安装完成后，您可以使用以下代码来安装el-upload组件：

npm install element-ui -S // 安装Element UI框架

常见用法

在您的Vue组件中，您可以加入以下代码来使用el-upload组件：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    multiple
    :before-upload="beforeUpload"
    :on-progress="handleProgress"
    :on-success="handleSuccess"
    :on-error="handleError"
    :auto-upload="false">
    <el-button slot="trigger" type="primary">选取文件</el-button>
    <el-button slot="tip" type="warning" icon="el-icon-information">仅支持jpg/png文件，且不超过500kb</el-button>
  </el-upload>
</template>

在这个示例中，我们将el-upload组件的file-list、multiple、before-upload、on-progress、on-success、on-error和auto-upload属性设置了具体的值。我将在下面的示例中详细解释每个属性的含义。

同时，我们还在el-upload组件内部放置了两个el-button组件。这两个按钮分别用于触发上传事件和提供一些相关的提示信息。

属性和事件

让我们一起来介绍el-upload组件的属性和事件：

fileList属性

在el-upload组件中，fileList属性用于储存要上传的文件列表。

<el-upload
  :file-list="fileList">
</el-upload>

multiple属性

如果您要上传多个文件，可以将el-upload组件的multiple属性设置为true。

<el-upload
  :multiple="true">
</el-upload>

before-upload事件

before-upload事件用于在上传文件之前进行客户端验证和处理文件。如果返回false或Promise.reject，上传将被阻止。

<el-upload
  :before-upload="beforeUpload">
</el-upload>

<script>
  export default {
    methods: {
      beforeUpload(file) {
        // 处理文件
      }
    }
  }
</script>

on-progress事件

on-progress事件用于上传文件时监测上传进度。此事件包含已上传的字节数和总字节数。

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

<script>
  export default {
    methods: {
      handleProgress(event, file, fileList) {
        // 监测上传进度
      }
    }
  }
</script>

on-success事件

on-success事件在文件上传成功时触发，返回服务器响应的信息。

<el-upload
  :on-success="handleSuccess">
</el-upload>

<script>
  export default {
    methods: {
      handleSuccess(response, file, fileList) {
        // 处理成功
      }
    }
  }
</script>

on-error事件

on-error事件在文件上传失败时触发，返回错误信息。

<el-upload
  :on-error="handleError">
</el-upload>

<script>
  export default {
    methods: {
      handleError(error, file, fileList) {
        // 处理失败
      }
    }
  }
</script>

auto-upload属性

auto-upload属性用于自动上传文件。如果您想手动上传文件，请将此属性设置为false。

<el-upload
  :auto-upload="false">
</el-upload>

示例

在这里，我将提供两个实际的el-upload组件的使用示例。

示例一：图片上传

<template>
  <el-upload
    action="/upload"
    :headers="{Authorization: 'Bearer ' + getToken()}"
    :on-preview="handlePicturePreview"
    :on-remove="handlePictureRemove"
    :file-list="pictureList"
    list-type="picture"
    :before-upload="beforeUploadPicture"
    :on-success="handlePictureSuccess"
    :on-error="handlePictureError">
    <i class="el-icon-plus"></i>
    <div class="el-upload__text">上传头像</div>
  </el-upload>
</template>

<style scoped>
  .el-upload__text {
    margin-top: 10px;
    font-size: 14px;
    color: #999;
  }
</style>

<script>
  export default {
    data() {
      return {
        pictureList: []
      }
    },
    methods: {
      getToken() {
        // 获取用户的Token
      },
      handlePicturePreview(file) {
        // 预览图片
      },
      handlePictureRemove(file, fileList) {
        // 移除图片
      },
      beforeUploadPicture(file) {
        // 处理图片
      },
      handlePictureSuccess(response, file, fileList) {
        // 处理成功
      },
      handlePictureError(error, file, fileList) {
        // 处理失败
      }
    }
  }
</script>

在这个示例中，我们使用list-type属性来设置上传的文件类型，将其设置为picture，来上传图片。

示例二：文件上传

<template>
  <el-upload
    action="/upload"
    :headers="{Authorization: 'Bearer ' + getToken()}"
    :on-preview="handleFilePreview"
    :on-remove="handleFileRemove"
    :file-list="fileList"
    :before-upload="beforeUploadFile"
    :on-success="handleFileSuccess"
    :on-error="handleFileError">
    <el-button type="primary" icon="el-icon-upload">上传文件</el-button>
  </el-upload>
</template>

<script>
  export default {
    data() {
      return {
        fileList: []
      }
    },
    methods: {
      getToken() {
        // 获取用户的Token
      },
      handleFilePreview(file) {
        // 预览文件
      },
      handleFileRemove(file, fileList) {
        // 移除文件
      },
      beforeUploadFile(file) {
        // 处理文件
      },
      handleFileSuccess(response, file, fileList) {
        // 处理成功
      },
      handleFileError(error, file, fileList) {
        // 处理失败
      }
    }
  }
</script>

在这个示例中，我们没有设置list-type属性，这意味着我们将上传任何类型的文件。

结论

通过本文的学习，您已经掌握了el-upload上传组件的基本使用方法。在您的Vue项目中，您可以使用这个组件来上传文件，同时也支持进度条监控功能。您还可以配置该组件的属性和事件，在实际应用中灵活运用。