vue2+elementUI 写导入文件的功能代码

下面是一个示例代码，可以实现导入文件的功能：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :headers="headers"
      :data="{ key: 'value' }"
      :multiple="false"
      :limit="1"
      :accept="fileTypes"
      :show-file-list="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileTypes: ".xls,.xlsx", // 可接受的文件类型
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response);
    },
    beforeUpload(file) {
      console.log(file);
      const isFileTypeAllowed =
        this.fileTypes.indexOf(file.type) !== -1 ||
        this.fileTypes.indexOf(file.name.split(".").pop()) !== -1;
      if (!isFileTypeAllowed) {
        this.$message.error("文件类型不支持");
        return false;
      }
      return true;
    },
  },
};
</script>

以上代码中，我们使用 ElementUI 中的 el-upload 组件来实现文件上传功能。该组件有很多属性可以配置，这里只列举了一些常用的属性和方法。其中，before-upload 方法用于在上传之前对文件进行校验，handleSuccess 方法用于处理上传成功后的响应。您可以根据自己的需求进行修改和补充。