重要一步是请求头设置
:title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height" :showCancel="false" @onConfirm="dialog.visible = false" > 下载模板: 上传文件: 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">
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
});
}
}
};
::v-deep .el-upload-list__item-name {
color: white;
}
::v-deep .el-upload-list__item-name [class^="el-icon"] {
color: white;
}
推荐文章
发表评论