大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
vue 使用element-ui的el-upload实现上传文件到后台的功能
1.添加el-upload控件
<el-upload
:action="action"
:file-list="modeList"
:http-request="modeUpload"
>
<el-button size="small" type="primary">上传</el-button>
</el-upload>
<el-button @click="upload">点击上传文件</el-button>data() {
return {
action: 'https://jsonplaceholder.typicode.com/posts/',
mode: {},
modeList: []
}
}:action是必不可少但是却没什么作用的
:http-request可以覆盖默认的上传方法
2.我配置的:action的值（就是官方文档示例的值）
action: 'https://jsonplaceholder.typicode.com/posts/'3.:http-request函数内容，将上传成功的文件保存到mode里面，mode是自己在data里面定义的变量，初始值是mode:{}
modeUpload: function(item) {
// console.log(item.file);
this.mode = item.file
}4.上传按钮的点击事件
upload: function() {
let fd = new FormData()
fd.append('templateFile', this.mode)
axios.post('/api/reportRule', fd, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response.data);
})
},5.上传成功，后台可以读取到数据
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/183864.html原文链接：https://javaforall.net
