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

完整代码(这做成了一个子组件)

<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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值