需要实现的功能需求,如下图所示:用户需要先下载模板,然后修改模板的内容,之后再上传excel文件。
<template> <a-card :bordered="false"> <div class="contentWrap"> <div class="table-operator" style="border-top: 5px"> <a-button @click="handleAdd" type="primary" icon="plus">批量新增</a-button> </div> </div> <UploadModal ref="modalUpload" @ok="modalFormOk"></UploadModal> </a-card> </template> <script> import UploadModal from '../components/UploadModal' export default { name: '', components: { UploadModal }, data() { return { } }, created() { }, mounted() {}, methods: { handleAdd() { this.$nextTick(() => { this.$refs.modalUpload.openUpload(1) }) }, }, } </script> <style scoped> </style>
<template> <a-modal title="批量上传" :width="500" :visible="visible" @cancel="handleCancel" :confirmLoading="confirmLoading" wrapClassName="ant-modal-cust-warp" style="top: 5%; height: 85%; overflow-y: hidden" :footer="null" > <div> 注意:单次上传数量请勿超过200条。 <a-button type="link" @click="handleDownloadFile" icon="download"> 下载上传模板 </a-button> </div> <div class="down" style="margin-top: 10px;"> <a-upload-dragger class="up_word" name="file" action="#" accept=".xlsx,.xls" :max-count="1" :multiple="false" :fileList="fileList" :before-upload="beforeUpload" @remove="handleRemove" @change="handleChange" @drop="handleDrop" > <!-- --> <div class="up-text"> <p class="ant-upload-drag-icon"> <a-button type="link" icon="cloud-upload"></a-button> </p> <!-- <p class="ant-upload-text">点击上传文件</p> --> <p class="ant-upload-hint">点击选择要上传的EXCEL文件</p> </div> </a-upload-dragger> <div class="r_b" style="text-align:right;"> <a-button style="margin-right: 10px" @click="handleCancel">取消</a-button> <a-button type="primary" @click="handleOk">确认</a-button> </div> </div> </a-modal> </template> <script> import { ACCESS_TOKEN } from '@/store/mutation-types' import { axios } from '@/utils/request' export default { name: 'UploadModal', components: { }, data() { return { visible: false, categoryType: null, // 1-包,2-模块,3-单体 confirmLoading: false, fileList: [], } }, created() { }, methods: { openUpload(type) { this.visible = true this.categoryType = type }, // 下载模板 handleDownloadFile() { console.log(window) var a = document.createElement('a') // 创建一个<a></a>标签 a.href = window.origin + "/baseData/电池信息导入模板.xlsx" //重点(如测试发现下载文件不存在/找不到,检查路径)。 //'电池信息导入模板.xlsx' 模板由后端人员放到服务器的 'baseData'文件夹里面, a.download = '信息导入模板' // 设置下载文件文件名 a.style.display = 'none' // 隐藏a标签 document.body.appendChild(a) // 将a标签追加到文档对象中 a.click() // 模拟点击了a标签,会触发a标签的href的读取,浏览器就会自动下载了 a.remove() }, handleRemove(file) { // console.log('handleRemove', file) const index = this.fileList.indexOf(file); const newFileList = this.fileList.slice(); newFileList.splice(index, 1); this.fileList = newFileList; }, beforeUpload(file) { // console.log('beforeUpload', file) this.fileList = [...(this.fileList || []), file]; //文件类型 var fileName = file.name.substring(file.name.lastIndexOf('.') + 1) if (fileName != 'xlsx' && fileName != 'xls') { this.$message.error('文件类型必须是xls或xlsx!') return false } // //读取文件大小 // var fileSize = file.size // //console.log(fileSize) // if (fileSize > 1048576) { // this.$message.error('文件大于1M!') // return false // } // 在 处理完后 最后return false return false; }, handleDrop(file) { // console.log('handleDrop', file); }, handleChange(info) { // console.log('handleChange', info.file) if (this.fileList.length === 2) { const newFileList = this.fileList.slice(); newFileList.splice(0, 1); this.fileList = newFileList; } // console.log(this.fileList.length); // 文件上传状态的控制 const status = info.file.status; // console.log('status', status) if (status === "removed") { this.handleRemove(info.file) } // if (status !== "uploading") { // console.log(info.file, info.fileList); // } // if (status === "done") { // // message.success(`${info.file.name} 文件上传成功.`); // } else if (status === "error") { // // message.error(`${info.file.name} 文件上传失败.`); // } }, handleOk() { // console.log(this.fileList) let that = this // 组件含有的方法,获取文件的相关信息 const formData = new FormData(); // 创建的对象,用于封装要上传的文件和其他需要传递的数据 formData.append("file", that.fileList[0]); formData.append("category", that.categoryType); // 1-包,2-模块,3-单体 // console.log(formData, that.fileList[0]); const config = { headers: { "Content-Type": "multipart/form-data", Authorization: ACCESS_TOKEN, // 请求头中的授权信息 }, }; axios({ url:"jeccgApi"+"/sys/energy/batteryInfo/importExcel", data: formData, method: 'post', headers: config.headers }).then(res=>{ if (res.success) { that.$message.success(res.message) that.$emit('ok') } else { that.$message.warning(res.message) } }) .finally(() => { that.confirmLoading = false that.handleCancel() }) }, handleCancel() { this.fileList = [] this.visible = false }, }, } </script> <style scoped> </style>