vue实现前后端分离的Excel文件上传
vue实现前后端分离的Excell文件上传代码运行环境前端使用Vue的Element组件发送excell文件后端使用springboot接收file文档代码运行环境前端使用Vue的Element组件发送excell文件Element官网链接如下:https://element.eleme.cn/#/zh-CN<el-upload:show-file-list="false":before-u
·
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
刚入门的小白,写的不足之处请多多指教,欢迎与我沟通交流!!!
更多推荐
已为社区贡献2条内容
所有评论(0)