<!-- excel文件上传 -->
<template>
<el-dialog
title="导入excel"
:visible.sync="dialogShow"
:before-close="handleClose"
width="22%"
>
<div class="elUploadBox">
<el-upload
drag
:limit="limitNum"
:auto-upload="false"
accept=".xlsx,.xls"
list-type="multipart/form-data"
:action="UploadUrl()"
:before-upload="beforeUploadFile"
:on-change="fileChange"
:on-exceed="exceedFile"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList"
>
<i class="el-icon-upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传xlsx或xls文件，且不超过10M</div>
</el-upload>
<br>
<el-button :loading="loading" size="small" type="primary" @click="uploadFile">立即上传</el-button>
<el-button size="small" @click="handleClose">取消</el-button>
</div>
</el-dialog>
</template>
<script>
import { memberExcelAction } from '@/api/file'
export default {
props: {
dialogShow: {
type: Boolean,
default: false
}
},
data() {
return {
loading: false,
limitNum: 1, // 上传excell时，同时允许上传的最大数
fileList: [] // excel文件列表
}
},
// 这个地方需要监听modalShow的变化,如果modalShow发生变化后,触发父组件对modal-show的更新
watch: {
dialogShow: function(val) {
this.$emit('update:dialogShow', val)
}
},
methods: {
// 文件超出个数限制时的钩子
exceedFile(files, fileList) {
this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`)
},
// 文件状态改变时的钩子
fileChange(file, fileList) {
this.fileList = []
this.fileList.push(file.raw)
},
// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
beforeUploadFile(file) {
const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
const size = file.size / 1024 / 1024
if (extension !== 'xlsx' || extension !== 'xls') {
this.$message.warning('只能上传后缀是.xlsx或.xls的文件')
}
if (size > 10) {
this.$message.warning('文件大小不得超过10M')
}
},
// 文件上传成功时的钩子
handleSuccess(res, file, fileList) {
this.$message.success('文件上传成功')
},
// 文件上传失败时的钩子
handleError(err, file, fileList) {
this.$message.error('文件上传失败')
},
UploadUrl: function() {
// 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
return ''
},
//主要方法
uploadFile() {
const that = this
if (that.fileList.length === 0) {
that.$message.warning('请上传文件')
} else {
// 将上传文件放在formdata类里面才能达到和包裹在form里面传输一样的效果
const file = that.fileList[0]
const param = new FormData()
that.loading = true
// 将得到的文件流添加到FormData对象
param.append('file', file, file.name)
memberExcelAction(param).then(response => {
if (response.type === 'application/json') {
// 将blob数据类型转换为json
const reader = new FileReader()
reader.readAsText(response, 'utf-8')
reader.onload = function(e) {
const readerres = reader.result
const parseObj = JSON.parse(readerres)
// 上传成功
if (parseObj.status === '200') {
that.$message({
message: '上传成功',
type: 'success'
})
} else if (parseObj.status === '-100') { // 上传失败
that.$message.error(parseObj.data.data)
}
}
that.loading = false
that.handleClose()
} else {
// 下载返回的错误excel文件
const blob = new Blob([response], { type: 'application/vnd.ms-excel' })// new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
const fileName = 'error.xls'// 下载文件名称
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
that.loading = false
that.$message.error('表格内容错误，请修改！')
}
})
}
},
handleClose(done) {
const that = this
that.dialogShow = false
that.fileList = []
}
}
}
</script>
<style lang="scss">
.elUploadBox{width: 95%;margin:0 auto;
.el-upload{width:100%;}
.el-upload-dragger{width:100%;}
}
</style>
//request组件封装
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// import store from '@/store'
// import { getToken } from '@/utils/auth'
// create an axios instance
//http://member.chstpa.com/'
const service = axios.create({
// baseURL: "https://www.chstpa.cn/", // url = base url + request url
baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
// pro: true, // send cookies when cross-domain requests
timeout: 600000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
// console.log(store.getters.token)
// do something before request is sent
// if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
const token = localStorage.getItem('Authorization')
if (token) {
config.headers['Authorization'] = token
// config.headers['responseType'] = 'blob'
// config.headers['responseType'] = 'arraybuffer'
// config.responseType = 'arraybuffer'
config.responseType = 'blob'
// config.headers['Content-Type'] = 'application/json;charset=UTF-8'
config.headers['Content-Type'] = 'application/json; application/octet-stream'
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response
console.log(res.err)
// if the custom code is not 20000, it is judged as an error.
if (res.status !== 200) {
Message({
message: res.desc || 'Error',
type: 'error',
duration: 5 * 1000
})
if (res.status === -1) {
MessageBox.confirm('登录信息超时，请重新登录！', '登录超时', {
confirmButtonText: '跳转到登录页面',
cancelButtonText: '关闭',
type: 'warning'
}).then(() => {
window.location.href = '#/login'
// this.$router.push({ path: '/login' })
// store.dispatch('user/resetToken').then(() => {
// location.reload()
// })
})
}
// this.$router.push({ path: '/login' })
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// // to re-login
// MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
// confirmButtonText: 'Re-Login',
// cancelButtonText: 'Cancel',
// type: 'warning'
// }).then(() => {
// // store.dispatch('user/resetToken').then(() => {
// // location.reload()
// // })
// })
// }
return Promise.reject(new Error(res.err.msg || 'Error'))
} else {
return response.data
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
//api管理
import request from '@/utils/requestBlob'
// 导入方法
export function memberExcelAction(data) {
return request({
url: '/member/memberExcel',
method: 'post',
data
})
}
