el-upload上传文件并上传参数案例

以下是一个基于 Element UI 中的 el-upload 组件上传文件并携带参数的案例：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/api/upload"
      :headers="headers"
      :multiple="false"
      :data="formData"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :on-exceed="handleExceed"
      :limit="limit"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('token'),
      },
      limit: 1,
      fileList: [],
      formData: {
        type: 'avatar',
      },
    };
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt500K) {
        this.$message.error('上传头像图片大小不能超过 500KB!');
      }
      return isJPG && isLt500K;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，已自动过滤多余的文件`);
    },
    handleSuccess(response, file, fileList) {
      this.$message.success('上传成功');
    },
    handleError(error, file, fileList) {
      this.$message.error('上传失败，请重试');
    },
  },
};
</script>

在这个案例中，我们使用了以下属性：

- `action`：上传文件的地址；
- `headers`：请求头部信息，此处使用了 JWT 鉴权；
- `multiple`：是否支持多选文件；
- `data`：上传文件时携带的参数；
- `before-upload`：上传文件前的钩子函数，可以对文件类型、大小进行校验等操作；
- `on-success` 和 `on-error`：上传成功和失败的回调函数；
- `on-exceed`：超出文件数量限制的回调函数；
- `limit`：限制上传文件数量；
- `file-list`：已上传的文件列表。