vue+axios上传excel功能实现_axios怎么怎么上传文件-优快云博客

本文链接：https://blog.youkuaiyun.com/u014445517/article/details/123708756

本文介绍了如何在Vue.js应用中结合axios实现Excel文件的上传功能，包括使用upload组件的代码展示，request组件的封装方法，以及对接API接口的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、upload组件代码

<!-- excel文件上传 -->
<template>
  <el-dialog
    title="导入excel"
    :visible.sync="dialogShow"
    :before-close="handleClose"
    width="22%"
  >
    <div class="elUploadBox">
      <el-upload
        drag
        :limit="limitNum"
        :auto-upload="false"
        accept=".xlsx,.xls"
        list-type="multipart/form-data"
        :action="UploadUrl()"
        :before-upload="beforeUploadFile"
        :on-change="fileChange"
        :on-exceed="exceedFile"
        :on-success="handleSuccess"
        :on-error="handleError"
        :file-list="fileList"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传xlsx或xls文件，且不超过10M</div>
      </el-upload>
      <br>
      <el-button :loading="loading" size="small" type="primary" @click="uploadFile">立即上传</el-button>
      <el-button size="small" @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { memberExcelAction } from '@/api/file'
export default {
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      limitNum: 1, // 上传excell时，同时允许上传的最大数
      fileList: [] // excel文件列表
    }
  },
  // 这个地方需要监听modalShow的变化,如果modalShow发生变化后,触发父组件对modal-show的更新
  watch: {
    dialogShow: function(val) {
      this.$emit('update:dialogShow', val)
    }
  },
  methods: