vue+elementupload 导入导出

    xiaoxiao2023-11-29  153

    1.导入

    /*html片段*/<el-upload class="upload" action="" // action是必填项,自定义导出给action制空 :http-request="uploadSectionFile" // 使用http-request自定义导入内容 :show-file-list="false"> <el-button class="in-item" type="primary" icon="el-icon-upload" @click="handleEntrance" > 导入 </el-button></el-upload> /*js片段*/uploadSectionFile(file) { // file导入文件 if (file) { uploadHospital(file).then(res => { // uploadHospital为自定义接口 if (Number(res.code) === 1) { this.$message({ message: res.data, type: 'success' }) } }) }},// 导入handleEntrance() { this.uploadSectionFile()},/*自定义接口*/export function uploadHospital(fileobj) { const param = new FormData() // 上传文件为forData类型 param.append('excelFile', fileobj.file) console.log(fileobj, param) return request({ method: 'post', url: '/management/hospital/uploadHos', headers: { 'Content-Type': 'multipart/form-data' }, // 设置响应头 data: param })}

    2.导出

    /*导出文件流,后端返回为文件*//*html*/<el-button class="out-item" type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>/*js*/handleExport() { exportHospital().then((res) => { const file = this.$store.state.app.headerContent //文件名从response 的header中获取 const filename = file['content-disposition'].split(';') [1].split('filename=')[1].split('"')[1] // 从content-disposition 中切割出导出文件名称 const en = decodeURIComponent(filename) const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) if (window.navigator.msSaveOrOpenBlob) { // 兼容ie window.navigator.msSaveBlob(blob, en) } else { const downloadElement = document.createElement('a') const href = window.URL.createObjectURL(blob) // 创建下载的链接 downloadElement.href = href downloadElement.download = en // 下载后文件名 document.body.appendChild(downloadElement) // 此写法兼容火狐 const evt = document.createEvent('MouseEvents') evt.initEvent('click', false, false) downloadElement.dispatchEvent(evt) document.body.removeChild(downloadElement) } })},

    最新回复(0)