vue结合后端本地上传文件

//按钮 <a-upload :beforeUpload="beforeUpload" :showUploadList="false"> <a-button type="primary" icon="upload">导入</a-button> </a-upload> <a-button @click="downExcel" type="primary" icon="download">导出</a-button> methods下 //引入 import { downFileExcel } from '@/api/manage' // 导入文件 beforeUpload(file) { return new Promise((resolve, reject) => { let fileType = file.type if ( fileType.indexOf('application/vnd.ms-excel') < 0 && fileType.indexOf('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') < 0 ) { this.$message.warning('请上传excl') reject(false) } else { let formData = new FormData() formData.set('file', file) // 后端接口 importExcel(formData).then(res => { if (!res.msg) { resolve(file) this.$message.success('上传成功') setTimeout(() => { // this.$router.go(0) this.$refs.modalTable.loadData(true) }, 500) } else { this.$message.error(res.msg) } }) } }) }, // 下载模板 downExcel(fileName) { if (!fileName || typeof fileName != 'string') { fileName = `游戏列表-${dayjs().format('YYYY-MM-DD')}` //自定义文件名 } let param = {} downFileExcel(this.exportXlsUrl, param).then(data => { if (!data) { this.$message.warning('文件下载失败') return } if (typeof window.navigator.msSaveBlob !== 'undefined') { window.navigator.msSaveBlob(new Blob([data]), fileName + '.xls') } else { let url = window.URL.createObjectURL(new Blob([data], { type: 'application/octet-stream' })) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', fileName + '.xls') document.body.appendChild(link) link.click() document.body.removeChild(link) //下载完成移除元素 window.URL.revokeObjectURL(url) //释放掉blob对象 } }) }

api文件下的manage.js

/** * 下载文件 用于excel导出 * @param url * @param parameter * @returns {*} */ export function downFile(url,parameter){ return axios({ url: url, params: parameter, method:'get' , responseType: 'blob' }) } export function downFileExcel(url,parameter){ return axios({ url: url, data: parameter, method:'post' , responseType: 'blob' }) }