vue 批量导入 + 过滤excel文件（用了el-upload），处理上传的excel

vue 批量导入 + 过滤excel文件（用了el-upload）

2020-12-18 11:59:02

完整代码（这做成了一个子组件）

<template>
    <div>
        <el-upload ref="upload" action="/" :on-change="handleChange" :onexceed="handleExceed" :show-file-list="false"
		 :auto-upload="false">
			<el-button type="success" class="excel-btn">Excel导入</el-button>
		</el-upload>
    </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
    data(){
        return{
            dataList:[]
        }
    },
    methods:{
        //上传文件时处理方法  
			handleChange(file, fileList) {
				// let file = file.files[0] // 使用传统的input方法需要加上这一步
				let self = this;
				const types = file.name.split(".")[1];
				const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
					item => item === types
				);
				this.fileTemp = file.raw;
				if (this.fileTemp) {
					if ((types == 'xlsx') || (types == 'xlc') || (types == 'xlm') || (types == 'xls') || (types == 'xlt') || (types ==
							'xlw') || (types == 'csv')) {
                        this.importfxx(types);
                        
					} else {
						this.$message({
							type: 'warning',
							message: '附件格式错误，请删除后重新上传！'
						})
					}
				} else {
					this.$message({
						type: 'warning',
						message: '请上传附件！'
					})
                }
			},
			//超出最大上传文件数量时的处理方法
			handleExceed() {
				this.$message({
					type: 'warning',
					message: '超出最大上传文件数量的限制！'
				})
				return;
			},
			importfxx(obj) {
				let _this = this;
				let inputDOM = this.$refs.inputer;
				// 通过DOM取文件数据
 
				this.file = event.currentTarget.files[0];
 
				var rABS = false; //是否将文件读取为二进制字符串
				var f = this.file;
 
				var reader = new FileReader();
				FileReader.prototype.readAsBinaryString = function(f) {
					var binary = "";
					var rABS = false; //是否将文件读取为二进制字符串
					var pt = this;
					var wb; //读取完成的数据
					var outdata;
					var reader = new FileReader();
					reader.onload = function(e) {
						var bytes = new Uint8Array(reader.result);
						var length = bytes.byteLength;
						for (var i = 0; i < length; i++) {
							binary += String.fromCharCode(bytes[i]);
						}
						//如果没有在main.js中引入，则此处需要引入，用于解析excel
						// var XLSX = require("xlsx");
						if (rABS) {
							wb = XLSX.read(btoa(fixdata(binary)), {
								//手动转化
								type: "base64"
							});
						} else {
							wb = XLSX.read(binary, {
								type: "binary"
							});
						}
                        _this.dataList = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                        _this.$emit('uploadField',_this.dataList)
						//outdata就是读取的数据（不包含标题行即表头，表头会作为对象的下标）
						//此处可对数据进行处理
						// let arr = [];
						// outdata.map(v => {
						//     let obj = {}
						//     obj.code = v['Code']
						//     obj.name = v['Name']
						//     obj.pro = v['province']
						//     obj.cit = v['city']
						//     obj.dis = v['district']
						//     arr.push(obj)
						// });
						// _this.da=arr;
						// _this.dalen=arr.length;
						// return arr;
					};
					reader.readAsArrayBuffer(f);
				};
				if (rABS) {
					reader.readAsArrayBuffer(f);
				} else {
					reader.readAsBinaryString(f);
				}
			},

    }
}
</script>

<style scoped>
.excel-btn {
		background: #16be44;
		height: 40px;
		border: none;
		color: #FFFFFF;
	}

</style>