<template>
<div>
<div style="width: 100%;">
<div class="upload-demo" id="drop_area">
<i class="el-icon-upload mg-r-5"></i>
<div class="el-upload__text">
将文件拖到此处,或<span @click="getFile" class="linkButn"
>点击上传</span
>
<input
style="display:none"
type="file"
class="input-upload cur-hand"
@change="importResident"
id="infile"
/>
</div>
</div>
<div class="downLoadFile">
<a href="./static/导入居民模板.xlsx" download="导入居民模板.xlsx">
<span class="miaoshu">只能上传excel文件,且不超过2MB</span
><span @click="download" class="linkButn">下载导入模板</span>
</a>
</div>
<div class="fileHtml">
<div>{{ fileData.name }}</div>
<div v-if="hasFile" class="hasFile">*未上传任何文件</div>
</div>
</div>
</div>
</template>
<script>
import SparkMD5 from "spark-md5";
import { uploadExcel } from "../../../utils/request";
export default {
data() {
return {
hasFile:false,
imgArr: [],
fileData: "",
action: "",
postAddress: "",
rules: {
name: [{ required: true, message: "请输入分组名称", trigger: "change" }]
}
};
},
mounted() {
// this.$refs["ruleForm"].resetFields();
let _this = this;
var dropbox = document.getElementById("drop_area");
dropbox.addEventListener("drop", this.enentDrop, false);
dropbox.addEventListener("dragleave", function(e) {
e.stopPropagation();
e.preventDefault();
});
dropbox.addEventListener("dragenter", function(e) {
e.stopPropagation();
e.preventDefault();
});
dropbox.addEventListener("dragover", function(e) {
e.stopPropagation();
e.preventDefault();
});
},
methods: {
getData() {
$("#infile").val("");
this.fileData = "";
},
getFile() {
this.hasFile = false;
console.log("111");
$("#infile").click();
},
// 导入居民模板
importResident(e) {
this.hasFile = false;
var that = this;
const file = e.target.files.length === 0 ? null : e.target.files[0];
that.fileData = file;
},
enentDrop: function(e) {
this.hasFile = false;
e.stopPropagation();
e.preventDefault(); //必填字段
this.fileData =
e.dataTransfer.files.length === 0 ? null : e.dataTransfer.files[0];
},
uploadFile() {
console.log("保存文件");
var that = this;
var fileReader = new FileReader();
var blobSlice =
File.prototype.mozSlice ||
File.prototype.webkitSlice ||
File.prototype.slice,
spark = new SparkMD5();
fileReader.readAsBinaryString(this.fileData);
var md5String = "";
fileReader.onload = function(e) {
spark.appendBinary(e.target.result); // append binary string
md5String = spark.end();
that.md5String = md5String;
// uploadExcel("", file, md5String).then(data => {
// $("#infile").val("");
// msg("导入成功", "success");
// });
};
},
// 下载导入模板成功提示
download() {
console.log("下载成功");
// setTimeout(function () {
// msg("下载成功", "success");
// }, 600);
},
// 保存数据
saveData() {
console.log(this.fileData.name);
if(this.fileData.name){
} else {
this.hasFile = true;
console.log('未上传任何文件')
}
// this.$refs["ruleForm"].validate(valid => {
// if (valid) {
// this.uploadFile();
// this.$emit("closeProp");
// }
// });
}
}
};
</script>
<style scoped>
a {
text-decoration: none;
color: #333;
}
a span {
color: #7572f7;
}
.upload-demo {
width: 80%;
margin: auto;
height: 15rem;
border: 1px solid #7572f7;
text-align: center;
}
.el-icon-upload {
font-size: 6rem;
margin: 2rem;
}
.linkButn {
cursor: pointer;
color: #7572f7 !important;
}
.miaoshu {
color: #333;
}
.downLoadFile {
margin: auto;
text-align: center;
margin-top: 1rem;
}
.fileHtml {
height: 1.5rem;
line-height: 1.5rem;
}
.hasFile{
color: red;
}
</style>
uploadExcel方法 需要改进判断类型
export function uploadExcel(url, file, md5String, type) {
const token = sessionStorage.getItem("token");
return new Promise((resolve, reject) => {
const formFile = new FormData();
const md5File = {
md5: md5String,
type: type
}
formFile.append('file', file);
if (md5String) {
formFile.append('data', DES3.encrypt(JSON.stringify(md5File)));
}
const instance = axios.create({
withCredentials: true,
timeout: 1000000
})
instance.post(api + url, formFile, {
headers: {
'token': token,
'Content-Type': 'multipart/form-data'
},
// responseType: 'text' // 表明返回服务器返回的数据类型
}).then(res => { //上传成功后导出文件
const data = JSON.parse(DES3.decrypt(res.data));
if (Object.is(data.errcode, 200)) {
if (data.data.filePath) {
const link1 = document.createElement('a');
link1.download = data.data.fileName;
link1.href = data.data.filePath;
link1.style.display = "none";
link1.click();
}
resolve(data)
} else if (Object.is(data.errcode, 401)) {
window.location.href = './#/login.do'
} else {
msg(data.errmsg);
reject(data.errmsg)
}
}).catch(err => {
msg('文件上传失败,请检查文件的格式是否正确');
})
});
安装spark-md5