话不多说,直接上示例:
//弹窗模式
<template>
<div class="bm-container">
<el-dialog title="导入" :visible.sync="addDialog" class="infoDialog addInfoDialog" :before-close="handleClose" append-to-body>
<div class="form-box" style="display: flex">
<div style="width: 100px;height: 35px;line-height: 35px;color: #333333;text-align: right;padding-right: 15px">文件:</div>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:auto-upload="false"
drag
action="#"
:on-change="(val)=>changeFile(val)"
:disabled="upload.isUploading"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“.xlsx“或”.xls”文件!</div>
</el-upload>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitUpload">确 定</el-button>
<el-button @click="handleClose">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {addFile} from "@/api/system/grid";
export default {
name: 'addInfo',
props: {
addDialog: { type: Boolean }
},
data() {
return {
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
uploadFileUrl: "http://122.225.221.35:8098/v1/searchExcel", // 上传的图片服务器地址
headers: {
'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary5s6AwfrF0hT0skDD',
// 'type': 'application/vnd.ms-excel',
'accept': 'application/json',
'z-token': localStorage.getItem("token")
},
formData:new FormData(),
// form:{
// title:''
// },
// 用户导入参数
upload: {
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
},
}
},
methods: {
handleClose() {
this.$emit('changeDialog', false);
},
// 上传前
beforeUpload(file) {
var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
// 限制上传格式为图片
// const isIMAGE = file.type === 'image/jpeg'||'image/gif'||'image/png';
const extension = testmsg === 'xls' || 'xlsx'
const isLt2M = file.size / 1024 / 1024 < 10 //这里做文件大小限制
if(!extension) {
this.$message({
message: '上传文件只能是 xls、xlsx格式!',
type: 'warning'
});
}
if(!isLt2M) {
this.$message({
message: '上传文件大小不能超过 10MB!',
type: 'warning'
});
}
return extension && isLt2M
},
// 文件上传成功处理
handleFileSuccess() {//, file, fileList
this.upload.isUploading = false;
},
// 上传失败
handleUploadError() {
console.log('上传失败')
},
changeFile (val) {
//file是键,val.raw是要传的文件,val.name是要传的文件名
this.formData.append('file', val.raw);
},
submitUpload(){
var _self = this
_self.$emit('changeDialog', false);
// _self.$refs.upload.submit();
addFile(_self.formData).then(response => {
this.$message({
type: 'success',
message: '上传成功,正在下载文件'
});
let reader = new FileReader();
reader.readAsDataURL(response);
reader.onload = function(e){
let a = document.createElement("a"); //创建一个a标签
a.style.display = "none";
a.download = "data.xls"; // 文件名称及类型,可以变成.word .zip 等等
a.href = e.target.result;
document.body.appendChild(a); // 将a标签添加在body上
a.click(); // a标签上绑定一个点击事件
document.body.removeChild(a); // 下载完成之后删除a标签
}
});
}
}
}
</script>
<style scoped>
</style>
grid.js
import request from './request'
// 导入文件
export function addFile(data) {
return request({
url: '',
method: 'post',
data: data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'z-token': localStorage.getItem("token")
},
responseType:'blob'
})
}