Vue：使用elementUI upload组件上传excel文件

image.png

弹框组件（完整代码）

封装的请求

import axios from 'axios'
// 导入表格
export const uploadXlsx= (url,data)=>{
    return axios({
        method: "post",
        url: `${url}`,
        headers: {
        "Content-type": "multipart/form-data"
        },
        data: data
    })
}

main.js引用

import { uploadXlsx } from "./utils/api";
Vue.prototype.uploadXlsx = uploadXlsx;

页面

import imporExcel from './imporExcel';//先引入组件(组件跟页面同级目录)
导入资产//导入按钮点击出现弹框
 // 导入
    imporRuItem(){
        this.dialogVisible=true
         this.$nextTick(() => {
            this.$refs["dialogCom"].dialogVisible = true;
          });
    },
    // 发送请求
    uploadFile(form) {
        this.uploadXlsx('/property/insertProperty',form).then(res=>{
             this.dialogVisible=false
             this.fetchData()//重新获取自己表格列表的数据
        })
    },

完整写下来就跟上面一样的效果了