vue实现前后端分离的Excel文件上传
程序员文章站
2022-03-15 11:40:12
...
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
刚入门的小白,写的不足之处请多多指教,欢迎与我沟通交流!!!
下一篇: 【一级讲解】斐波那契的拆分——栈与贪心
推荐阅读
-
vue中实现图片和文件上传的示例代码
-
koa上传excel文件并解析的实现方法
-
结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程
-
vue使用axios实现文件上传进度的实时更新详解
-
vue.js异步上传文件前后端实现代码
-
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
-
webuploader分片上传的实现代码(前后端分离)
-
elemetUi 组件--el-upload实现上传Excel文件的实例
-
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
-
Vue实现点击按钮下载文件的操作代码(后端Java)