详解vue是怎么导入文件的（以下是个做成组件的导入小例子）

1.html部分

<template>
  <div>
    <el-dialog
      title="导入"
      :visible.sync="dialogExcelVisible"
      width="600px"
      :before-close="handleClose"
    >
      <el-form label-position="right" label-width="120px" :model="excelForm">
        <el-form-item label="Excel文件">
          <el-upload
            class="image-uploader"
            :multiple="false"
            :auto-upload="true"
            list-type="text"
            :show-file-list="true"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :drag="true"
            action
            :limit="1"
            :on-exceed="handleExceed"
            :http-request="httpRequest"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              一次只能上传一个文件，仅限Excel和XMl文件
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose" size="mini">取消 </el-button>
        <el-button type="primary" size="mini" @click="uploadExcel"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

2.js部分

<script>
import XLSX from "xlsx";
export default {
  props: {
    dialogExcelVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      excelForm: {},
      fileList: [],
      excelData: [],
      fileObj: {},
      fileParma: "",
    };
  },
  methods: {
    beforeUpload(file) {
      if (!file) {
        return false;
      } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
    },
    httpRequest(e) {
      let file = e.file; // 文件信息
      this.fileParma = e.file;
      this.fileObj = new FormData();
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary", // 以字符编码的方式解析
          });
          this.excelData = workbook.SheetNames;
        } catch (err) {
          return false;
        }
      };
      fileReader.readAsBinaryString(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`);
    },
    uploadExcel() {
      this.fileObj.append("xlsFile", this.fileParma);
      this.$axios
        //根据实际情况要替换掉接口
        .post(`/api/WMSV2/ImportInventoryRecord_Excel`, this.fileObj)
        .then((res) => {
          if (res.data.status == true) {
            this.$message({
              message: "成功",
              type: "success",
            });
            this.fileList = [];
            this.$emit("handleClose1");
          }
        });
    },
    handleClose() {
      this.fileList = [];
      this.$emit("handleClose");
    },
  },
};
</script>