iview upload 手动上传
![](https://img2022.cnblogs.com/blog/890760/202211/890760-20221114153044196-1106289742.png)
<template> <div class="batchAddCustomer-container"> <p class="tit-p">水电管理</p> <div class="downtext">下载模板</div> <div class="text"> 注意事项: <div> <p>1、表具内容在Excel中只可填写纯文本内容。</p> <p>2、表具类型、抄表类型可下拉选择,表具编号均需手动输入。</p> </div> </div> <div class="main"> <Row> <Col> <div class="download"> <Button @click="handleDownLoad" icon="ios-cloud-download-outline" type="primary" >下载文件</Button > </div> </Col> </Row> <Row> <Col> <div class="upload"> <Upload ref="upload" :action="uploadUrl" :headers="headers" name="file" :before-upload="beforeUpload" :accept="accept" > <Button icon="ios-cloud-upload-outline" type="primary" >上传文件</Button > </Upload> <div style="margin-top: 5px"> <!-- 文件内容格式需严格按照提供下载模板的格式 --> 可以上传excel格式文件,单个文件不可超过5M </div> <div style=" display: flex; justify-content: space-between; width: 300px; " v-if="file" > <span>{{ file.name }}</span ><span @click="file = null" ><Icon size="20" type="ios-close" /></span> </div> </div> </Col> </Row> <div class="btn"> <Button @click="handleSubmit" :disabled="btnType" class="btnStyle" type="primary" >提交</Button > <Button @click="handleBack" class="btnStyle">返回</Button> </div> </div> </div> </template> <script> import { importMeterExcel } from "@/api/Instrumentmanagement"; export default { data() { return { uploadUrl: this.$store.state.app.importMeterExcel, //文件上传 headers: { "author-token-key": localStorage.getItem("token"), }, file: null, btnType: false, accept: ".xlsx,.xls", Format: [".xlsx", ".xls"], }; }, created() {}, mounted() { sessionStorage.setItem("customer_detail", true); }, methods: { beforeUpload(file) { let fileType = file.name.split("."); fileType = fileType[fileType.length - 1].toLowerCase(); if (fileType == "xlsx" || fileType == "xls") { this.file = file; //手动上传,这里返回是关键 return false; } else { this.$Message.warning("只能上传.xlsx或.xls格式的文件"); this.file = null; return false; } }, //下载文件 handleDownLoad() { let urls = this.$store.state.app.downloadMeterImportExcel + "?author-token-key=" + localStorage.getItem("token"); window.open(urls); }, handleBack() { this.$router.go(-1); }, handleSubmit() { if (this.file) { this.btnType = true; setTimeout(() => { this.btnType = false; }, 2000);
//传给后台 let formData = new FormData(); formData.append("file", this.file); importMeterExcel(formData).then((res) => { if (res.data.status == 200) { this.$message.success(res.data.desc); this.$router.go(-1); } else { this.$message.error(res.data.desc); } }); } else { this.$message.error("请先上传文件"); } }, }, }; </script> <style lang="less" scoped> .batchAddCustomer-container { .tit-p { border: 1px solid #ddd; margin: 20px 0; padding: 6px; } .main { margin-top: 20px; .upload { margin-top: 30px; } .btn { margin-top: 20px; .btnStyle { margin-right: 10px; } } } } .downtext { color: rgba(92, 164, 171, 1); font-size: 14px; text-align: left; font-family: SourceHanSansSC-regular; margin: 10px 0; } .text { color: rgba(106, 106, 106, 1); font-size: 14px; text-align: left; font-family: SourceHanSansSC-regular; margin: 10px 0; p { height: 30px; line-height: 30px; } } </style>
export function importMeterExcel(data) { return util.http({ url: api + '/meter/importMeterExcel', method: 'POST', data }) }