element upload上传文件,el-upload自定义上传
这篇文章主要为大家详细介绍了某视频剪辑软件使用埃尔-上传实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
因为我是vue springboot前后分离，要跨域，就不能用默认的行为写请求地址，我用爱可信时最困扰的就是怎么拿到那个真实的文件，然后给传给后台。
其实可以通过自带的在频道上触发方法获得文件列表，文件信息中那个生的就是真实的文件。
写的时候，刚开始我是直接把埃尔-上传里面的按钮中加了点击事件，但是每次文件还没选，就已经向后台发出请求了，当然传不过去，于是外面套了个表格。
元素-用户界面组件使用可以查看文档
upload.vue
模板
埃尔格式
El-表单-项目标签=姓名prop=name
埃尔输入v-model=name/el输入
/El-表单-项目
埃尔-表单-项目
el-upload ref=upfile
style=display: inline
：自动上传=假
:on-change=handleChange
:file-list=fileList
action=#
el按钮类型=成功选择文件/el-button
/El-上传
/El-表单-项目
埃尔-表单-项目
el按钮类型=成功@click=上传点击上传/el-button
/El-表单-项目
/el格式
/模板
脚本
导出默认值{
名称：上传用户界面，
data(){
返回{
名称：,
文件列表：[]
}
},
方法：{
//通过在频道上触发方法获得文件列表
handleChange(文件，文件列表){
这个。文件列表=文件列表；
console.log(文件列表)
},
上传(){
设FD=new FormData()；
fd.append(name ，this。姓名)；
this.fileList.forEach(item={
//文件信息中生的才是真的文件
fd.append(files ，item。raw)；
//console.log(item.raw)
})
这个axios.post(/uploadUi ，fd).然后(res={
if (res.data.code===200) {
//控制台。日志(分辨率)；
这个. $消息(上传成功)
}否则{
这个. $消息(失败)
}
})
},
}
}
/脚本
springboot后台 uploadController.java
包com。举例。演示。控制器；
导入Java。io。文件；
导入Java。io。文件输出流；
导入Java。io。inputstream
导入Java。util。列表；
导入org。spring框架。网络。绑定。注释。交叉起源；
导入org。spring框架。网络。绑定。注释。后期映射；
导入org。spring框架。网络。绑定。注释。put映射；
导入org。spring框架。网络。绑定。注释。请求正文；
导入org。spring框架。网络。绑定。注释。请求映射；
导入org。spring框架。网络。绑定。注释。请求参数；
导入org。spring框架。网络。绑定。注释。响应正文；
导入org。spring框架。网络。绑定。注释。休息控制器；
导入org。spring框架。网络。多部分。多部分文件；
导入com。举例。演示。实体。列表参数；
导入com。举例。演示。实体。我的用户；
导入com。举例。演示。实体。结果；
@RestController
@ResponseBody
@交叉起源
@RequestMapping(/api )
公共类上传控制器{
@PostMapping(/uploadUi )
公共结果upFile(@RequestParam(name )字符串名称，@ request param( files )多部分文件[]文件){
System.out.println(开始);
System.out.println(名称);
如果（文件！=null) {
对于(多文件文件：文件){
字符串fileName=file。getoriginalfilename()；
System.out.println(文件名);
尝试{
File mkdir=new File( F:\ \ app \ \ File )；
如果(!mkdir.exists()) {
mkdir。mkdirs()；
}
//定义输出流，将文件写入硬盘
文件输出流OS=新文件输出流(mkdir。getpath() \ \ 文件名)；
InputStream in=file。getinputstream()；
int b=0；
while((b=in.read())！=-1){ //读取文件
OS。写(b)；
}
OS。flush()；//关闭流
英寸close()；
OS。close()；
}catch(异常e) {
e。printstacktrace()；
返回新结果(401，‘失败’)；
}
}
返回新结果(200，成功)；
}否则{
返回新结果(401，“文件未找到”)；
}
}
}
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。