html部分
<div class="announcements12" style="display: flex">
<el-input v-model="url"></el-input>
<el-upload
ref="upload"
:action="uploadUrl"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-change="handleFileUpload"
:file-list="fileList"
:auto-upload="false"
:headers="headers"
>
<!--action 上传的地址
on-preview 点击文件列表中已上传的文件时
on-remove 文件列表移除文件时
on-change 文件状态改变时
file-list 上传的文件列表【array】
auto-upload 是否在选取文件后立即进行上传
headers 设置上传的请求头部【Object】 -->
<div slot="tip" class="el-upload__tip">只能上传xlsx文件格式</div>
<el-button slot="trigger" size="small" type="primary" class="btnBorder"
>选取文件</el-button
>
</el-upload>
</div>
<div slot="footer">
<el-button @click="onClose" class="btnBorder">取消</el-button>
<el-button type="primary" @click="submitUpload" class="btnBorder"
>确定</el-button
>
</div>
script部分
import {
importLawDocument,
downloadTemplate,
} from "@/api/lawDatabase.js";
import { debounce } from "lodash";
<script>
export default {
data() {
return {
file: null,
list: [],
headers: {
"Content-Type": "multipart/form-data",
},
uploadUrl: "",
url: "",
formData: null,
// up
fileList: [],
excelData: {
header: null,
results: null,
},
code: "regulations_template",
templateUrl: "",
};
},
};
methods: {
// 文件改变时
handleFileUpload(event) {
this.file = event.raw;
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => {
resolve();
};
reader.readAsArrayBuffer(this.file);
this.uploadUrl =
window.location.protocol +
"//" +
window.location.host +
"/law/lawRegulationsLibrary/upload";
this.url = document.getElementsByClassName("el-upload__input")[0].value;
});
},
submitUpload: debounce(async function () {
if (this.file) {
if (
this.file.type !=
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
)
return this.$message.error("文件只能是 上传xlsx 格式!");let formData = new FormData();
if (formData.document == undefined) {
}
if (
this.file.type ==
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
) {
formData.append("document", this.file);
formData.append("regulationsId", this.uploadId.id);const { code } = await importLawDocument(formData);
if (code === 200) {
this.$message.success('上传成功');
this.url = this.$options.data().url;
this.onClose();
this.file = null;
}
}
}
}, 500), // 设置防抖延迟时间(单位:毫秒),这里设置为500毫秒
//删除的钩子
handleRemove(file, fileList) {
},
//已上传的
handlePreview(file) {
},
onClose() {
this.url = "";
this.$emit("update:showUpload", false);
},}
</script>