详细解释el-upload中的参数并举例子

el-upload 是 Element UI 中提供的文件上传组件，常用的参数有以下几个：

1. action：必选参数，上传的地址
2. headers：可选参数，上传时需要发送的请求头信息
3. data：可选参数，上传时需要额外发送的请求参数
4. multiple：可选参数，是否支持多选文件，默认为 false
5. drag：可选参数，是否支持拖拽上传，默认为 false
6. before-upload：可选参数，上传文件之前的钩子函数
7. on-success：可选参数，上传成功时的回调函数
8. on-error：可选参数，上传失败时的回调函数

举个例子，比如我们要上传一张图片到服务器，可以使用如下代码：

<template>
  <el-upload
    class="avatar-uploader"
    action="/api/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    handleSuccess(response) {
      this.imageUrl = response.data.url;
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

在这个例子中，我们使用了 el-upload 组件来实现上传头像图片的功能。其中，action 参数指定了上传的地址，即 /api/upload，before-upload 参数指定了上传文件前的钩子函数，on-success 参数指定了上传成功时的回调函数。在 beforeUpload 函数中，我们可以对上传的文件进行校验，比如判断文件类型和大小是否符合要求。在 handleSuccess 函数中，我们可以获取到上传成功后服务器返回的数据，并将图片显示在页面上。