<template>
<el-upload
:headers="headers"
action="##"
:http-request="uploadServerLog"
>
<el-button size="small" type="primary">上传</el-button>
</el-upload>
</template>
<script>
// upload为自己业务的后端上传接口,自行更换
import {upload} from "@/api/terminalApplication";
export default {
data() {
return {}
},
// 需要获取token
computed: {
headers() {
return {
'Authorization': 'Bearer ' + this.$store.state.user.token // 直接从本地获取token就行
};
}
},
methods: {
// uploadServerLog方法 是页面中 el-upload 组件 :http-request所绑定的方法;
uploadServerLog(params) {
const file = params.file;
// 根据后台需求数据格式
const form = new FormData();
// 文件对象
form.append('file', file);
// 本例子主要要在请求时添加特定属性,所以要用自己方法覆盖默认的action
// 将form作为参数传给后台上传接口即可
upload(form).then(res => {
console.log(res)
}).catch(err => {
console.log(err);
});
},
}
}
</script>