vue实现前后端分离的Excel文件上传

代码运行环境

前端使用Vue的Element组件发送excel文件

Element官网链接如下：https://element.eleme.cn/#/zh-CN

          <el-upload
                    :show-file-list="false"
                    :before-upload="beforeUpload"
                    :on-success="onSuccess"
                    :on-error="onError"
                    :disabled="importDisabled"
                    style="display: inline-flex;margin-right: 10px;"
                    action="http://10.5.44.10:8080/houDuan_war/java/upload.do">
                <el-button size="medium" :disabled="importDisabled" type="primary" round :icon="importDataIcon">
                    {{importDataText}}
                </el-button>
                <div >只能上传xlsx文件</div>
                <div class="result1">航班延误预测结果为：</div>
                <div class="result2">{{result}}</div>
            </el-upload>

这个文件发送写的比较简单，主要注意两个元素:
1.onSuccess
用于接收后端消息的返回值，接收后端消息的方法如下。
需要在methods方法中定义

methods:{
onSuccess(res) {
                // 成功后文本修改为原来的导入数据
                this.importDataText = '导入数据';
                // 图标修改
                this.importDataIcon = 'el-icon-upload2';
                // 将上传组件改为允许使用
                this.importDisabled = false;
                // message 弹出消息
                this.$message.success("导入成功！");
                console.log(res)
                //把接收到的res存入data的result
                this.result=res;
            }
        }

2.action
用于写发送的地址，前后端分离的项目涉及跨域问题，可以通过前端配置代理解决跨域。

后端使用springboot接收file文档

如果后端是springmvc，可以看我另一篇博客：添加链接描述
https://blog.csdn.net/weixin_44452346/article/details/107613304

刚入门的小白，写的不足之处请多多指教，欢迎与我沟通交流！！！