重要一步是请求头设置

<template>
  <div>
    <el-button type="primary" @click="openDialog">{{ title }}</el-button>
    <sys-dialog
      :title="dialog.title"
      :visible="dialog.visible"
      :width="dialog.width"
      :height="dialog.height"
      :showCancel="false"
      @onConfirm="dialog.visible = false"
    >
      <div slot="content">
        <el-row style="padding-left: 30px;padding-top: 30px;">
          <el-col :span="4">
            下载模板:
          </el-col>
          <el-col :span="20">
            <el-button type="primary" icon="el-icon-download">下载模板</el-button>
          </el-col>
        </el-row>
        <el-row style="padding-left: 30px;padding-top: 30px;">
          <el-col :span="4">
            上传文件:
          </el-col>
          <el-col :span="20">
            <el-upload
              ref="upload"
              :headers="headers" 
              :action="baseURL + apiURL"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              :file-list="fileList"
              :accept="acceptExcel"
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary" icon="el-icon-folder-add">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" icon="el-icon-upload2">确定导入</el-button>
              <div slot="tip" style="color: white;font-size: 12px;">只能上传xlsx/xls文件</div>
            </el-upload>
          </el-col>
        </el-row>
      </div>
    </sys-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import SysDialog from "@/components/dialog/SysDialog.vue";
export default {
  name: "importBtn",
  props: {
    apiURL: {
      type: String,
      default: null
    },
    title: {
      type: String,
      default: '导入文件'
    }
  },
  components: {
    SysDialog
  },
  data() {
    return {
      fileList: [],
      baseURL: process.env.VUE_APP_BASE_API,
      headers: {
        Authorization: getToken()
      },
      acceptExcel: ".xlsx, .xls",
      dialog: {
        title: "上传数据文件",
        visible: false,
        width: 500,
        height: 250,
      },
    };
  },
  methods: {
    openDialog() {
      this.dialog.visible = true
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
      this.$notify({
        title: "上传成功",
        type: "success",
        duration: 2500
      });
    },
    handleError(error, file, fileList) {
      // 处理上传失败的逻辑
      this.$notify({
        title: "上传失败请重试",
        type: "error",
        duration: 2500
      });
    }
  }
};
</script>
<style scoped>
::v-deep .el-upload-list__item-name {
  color: white;
}
::v-deep .el-upload-list__item-name [class^="el-icon"] {
  color: white;
}
</style>

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐