【elementUI】el-upload上传文件以及请求头设置
el-upload请求头设置
文章共578字 · 阅读需要大约2分钟
一键AI生成摘要,助你高效阅读
问答
·
重要一步是请求头设置
<template>
<div>
<el-button type="primary" @click="openDialog">{{ title }}</el-button>
<sys-dialog
:title="dialog.title"
:visible="dialog.visible"
:width="dialog.width"
:height="dialog.height"
:showCancel="false"
@onConfirm="dialog.visible = false"
>
<div slot="content">
<el-row style="padding-left: 30px;padding-top: 30px;">
<el-col :span="4">
下载模板:
</el-col>
<el-col :span="20">
<el-button type="primary" icon="el-icon-download">下载模板</el-button>
</el-col>
</el-row>
<el-row style="padding-left: 30px;padding-top: 30px;">
<el-col :span="4">
上传文件:
</el-col>
<el-col :span="20">
<el-upload
ref="upload"
:headers="headers"
:action="baseURL + apiURL"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList"
:accept="acceptExcel"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary" icon="el-icon-folder-add">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" icon="el-icon-upload2">确定导入</el-button>
<div slot="tip" style="color: white;font-size: 12px;">只能上传xlsx/xls文件</div>
</el-upload>
</el-col>
</el-row>
</div>
</sys-dialog>
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
import SysDialog from "@/components/dialog/SysDialog.vue";
export default {
name: "importBtn",
props: {
apiURL: {
type: String,
default: null
},
title: {
type: String,
default: '导入文件'
}
},
components: {
SysDialog
},
data() {
return {
fileList: [],
baseURL: process.env.VUE_APP_BASE_API,
headers: {
Authorization: getToken()
},
acceptExcel: ".xlsx, .xls",
dialog: {
title: "上传数据文件",
visible: false,
width: 500,
height: 250,
},
};
},
methods: {
openDialog() {
this.dialog.visible = true
},
submitUpload() {
this.$refs.upload.submit();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleSuccess(response, file, fileList) {
// 处理上传成功的逻辑
this.$notify({
title: "上传成功",
type: "success",
duration: 2500
});
},
handleError(error, file, fileList) {
// 处理上传失败的逻辑
this.$notify({
title: "上传失败请重试",
type: "error",
duration: 2500
});
}
}
};
</script>
<style scoped>
::v-deep .el-upload-list__item-name {
color: white;
}
::v-deep .el-upload-list__item-name [class^="el-icon"] {
color: white;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)