请帮我用el-upload写一个上传附件的代码，改功能可以支持png、jpeg、doc、docx、xls、xlsx、pdf文档上传，大小限制20M

好的，以下是一个基于 Element UI 中的 el-upload 组件实现的文件上传示例代码：

<template>
  <el-upload
    action="/api/upload"
    :before-upload="beforeUpload"
    :on-exceed="handleExceed"
    :limit="limit"
    :file-list="fileList"
    :on-success="handleSuccess"
    :on-error="handleError"
    :headers="headers"
    :accept="accept"
    :on-remove="handleRemove">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">支持上传格式：png, jpeg, doc, docx, xls, xlsx, pdf，大小不超过20MB</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      limit: 10,
      accept: ".png,.jpeg,.doc,.docx,.xls,.xlsx,.pdf",
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token")
      },
    };
  },
  methods: {
    beforeUpload(file) {
      const isLt20M = file.size / 1024 / 1024 < 20;
      if (!isLt20M) {
        this.$message.error("上传文件大小不能超过 20MB!");
      }
      return isLt20M;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handleSuccess(response, file, fileList) {
      this.$message.success("上传成功！");
      console.log(response);
    },
    handleError(error, file, fileList) {
      this.$message.error("上传失败！");
      console.log(error);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
  },
};
</script>

在上面的代码中，我们设置了一些参数来实现对上传文件的限制，包括：

- `accept` 属性：用来限制上传的文件类型，值为支持的文件类型的后缀名列表，多个类型用逗号隔开。
- `beforeUpload` 方法：在上传文件之前触发，用来限制上传文件的大小，如果文件大小超过 20MB，那么就会提示用户错误信息并阻止上传。
- `on-exceed` 属性：当上传的文件数量超过 `limit` 属性设置的最大限制时触发。
- `limit` 属性：用来限制上传的文件数量。
- `on-success` 属性：上传成功之后的回调函数。
- `on-error` 属性：上传失败之后的回调函数。
- `on-remove` 属性：从文件列表中移除文件时触发的回调函数。

其中，`action` 属性指定了上传文件的接口地址，`headers` 属性可以设置请求头，用来传递认证信息等。你需要根据实际情况来修改这些属性的值。

另外，你需要在后端实现上传文件的接口，并且对上传的文件进行大小和类型的验证。具体实现方式可以参考你选择的后端框架的文档。