vue的axios实现url传参,vue请求后端数据axios
这篇文章主要为大家详细介绍了vue axios java实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue axios java实现文件上传的具体代码，供大家参考，具体内容如下
背景
vue.js axios元素前端，Java后台实现的文件上传，简单例子
前端代码
document.vue
模板
差异
el-row class=action-row
el-col :span=9
El-button type= primary icon= El-icon-plus @ click= add size= medium 新增/el-button
/el-col
/el-row
！-列表-
el-row
El-table:data= docs ref= docs style= width:100% stripe @ sort-change= sort v-loading= loading
El-table-column prop= doc文件名 label=文件名称可排序align=居中最小宽度= 10% /El-表格-列
El-table-column prop= doc filetype label=文件类型可排序align=居中最小宽度= 10% /El-表格-列
El-table-column prop= create time label=上传时间可排序align=居中最小宽度= 10% /El-表格-列
/el-table
div class=分页
埃尔分页
@size-change=handleSizeChange
@ current-change= handlePageChange
:current-page=page
:page-size=limit
:total=total
:page-size=[10，20，50，100]
布局=总计，大小，上一页，分页，下一页，跳转
:background=true
/El-分页
/div
/el-row
！-新建按钮弹出框-
el-dialog title=上传附件：可见。sync=编辑可见:append-to-body= true width= 450 px
El-form:model= GTS文档:rules= rules ref= GTS文档 label-width= 120 px label-position= left size= small class= edit-form
El-表单-项目标签=上传附件prop=file
El-upload ref= upload action= doup load :limit= limit num :auto-upload= false :on-change= file change :on-exceed= exceed file :file-list= file list
El按钮尺寸=小平面选择文件/el-button
/El-上传
/El-表单-项目
/el格式
div slot=footer class=对话框-页脚
El-button @ click= edit visible=false 取消/el-button
El-button type= primary @ click= save 确定/el-button
/div
/el-dialog
/div
/模板
脚本
从@/api/gts/document导入{ list，del，create }；
导出默认值{
名称：“GTS文档，
data() {
返回{
editvisible: false，//新增弹出框显示标识：默认不显示
全球电信系统(Global Telecommunication System)文档：{
//随附单据表单
文档类型："",
文档编号： ,
gtsId: ，
taskId: ，
文件：""
},
我更新：假的，
limitNum: 1，
文件列表：[],
文档：[],
加载：假，
第一页，
限制：10,
总计：0,
规则：{},
};
},
已创建：函数(){
这个。search()；
},
方法：{
search() {
//初始化列表
列表(this.page，this.limit，this .$route.query.gtsId).然后(v={
if (ok==v.data.msg) {
这个。文档=v .数据。行；
这个。总计=v .数据。总计；
}
});
},
//新增按钮点击事件
add() {
this.editvisible=true
这个. nextTick(()={
this.isupdate=false
这个参考文献。GTS文件。重置字段()；
});
},
//文件超出个数限制时的校验
超出文件(文件，文件列表){
这个. notify.warning({
标题：这个. t(com.warning )，
留言：这个. t( com。仅选择)` $ { this。限制数量} `这个.$t(com.someFile )
});
},
//文件状态改变时的事件
文件更改(文件，文件列表){
这个。GTS文件。文件=文件。生的；
},
//保存
save() {
这个参考文献gtsDocument.验证（有效={
如果（有效){
let formData=new formData()；
让文件=这个。GTS文件。文件；
formData.append(file ，file)；
如果(!文件){
归还这个message.warning(请选择上传附件);
}
创建(表单数据).然后(resp={
if (ok==resp.data.msg) {
this.editvisible=false
这个message.success(数据保存成功);
这个。search()；
这个参考文献。上传。清除文件()；
}否则{
这个message.error(保存失败);
}
});
}
});
},
handlePageChange(i) {
这个。page=I；
这个。search()；
},
handleSizeChange(i) {
这个。极限=I；
这个。search()；
},
}
};
/脚本
style rel=stylesheet/css 。设置形式100 . El-表单-项目_ _标签{
填充-右：30px
}
/风格
文档。射流研究…
从@/实用程序/请求导入超文本传送协议（Hyper Text Transport Protocol的缩写）
从" axios "导入爱可信
导出函数创建(表单数据){
返回axios({
URL: http://localhost:8080/solvay-e海关//GTS/documents/add ，
方法： post ，
数据：formData，
withCredentials: true //与甜饼干交叉
})
}
导出功能列表（页面，限额，id) {
返回http.post(gts/documents ，{ page，limit，id })
}
后台代码
控制器层
/**
* p描述：附件上传/p
* @param文件上传附件
* @返回
*/
@ResponseBody
@PostMapping(/documents/add )
公共字符串添加附加(@ request param( file )多部分文件文件)引发IOException {
//获取文件名称
字符串fileName=file。getoriginalfilename()；
if (StringUtils.isBlank(文件名)){
返回jsonfailed(文件不能为空);
}
//获取文件的大小
长文件大小=文件。getsize()；
如果(文件大小10 * 1024 * 1024) {
返回jsonfailed(上传文件大小超出限定大小10M’)；
}
//获取文件的扩展名
//字符串扩展名=文件名utils。获取扩展名(文件名);
//获取配置路径
string path= D:/home/e customs/upload/；
字符串new path=path uuid。随机uuid().toString().replaceAll(-， ) \ \ ；
文件新目录=新文件(新路径)；
如果(!newDir.exists()) {
新目录。mkdirs()；//目录不存在的情况下，创建目录
}
文件新文件=新文件(新目录，文件名)；
//通过CommonsMultipartFile的方法直接写文件（注意这个时候)
文件。转移到(新文件)；
返回"确定";
}
实现截图如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。