欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-15 11:40:12
...

代码运行环境

前端使用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

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

相关标签: vue.js