vue上传txt文件,并且读取txt内容

需求:点击上传txt文件,先读取txt文件中的内容进行展示。

上传使用的是element的upload如下:



上传文件

下面是业务逻辑:

 beforeCreate() {
			// 读取文件
			FileReader.prototype.reading = function ({encode} = pms) {
				let bytes = new Uint8Array(this.result);    //无符号整型数组
				let text = new TextDecoder(encode || 'UTF-8').decode(bytes);
				return text;
			};
			/* 重写readAsBinaryString函数 */
			FileReader.prototype.readAsBinaryString = function (f) {
				if (!this.onload)       //如果this未重写onload函数,则创建一个公共处理方式
					this.onload = e => {  //在this.onload函数中,完成公共处理
						let rs = this.reading();
						console.log(rs);
					};
				this.readAsArrayBuffer(f);  //内部会回调this.onload方法
			};
},
methods:{
    beforeUpload(file){
        this.fileList = [file]
        console.log('选择了文件beforeUpload')
        // 读取数据
        this.read(file);
        return false
    },
    read(f) {
			let rd = new FileReader();
			rd.onload = e => {  
            //this.readAsArrayBuffer函数内,会回调this.onload函数。在这里处理结果
				let cont = rd.reading({encode: 'GBK'});
				console.log(cont);
				let  formerData = this.textData;
				this.textData = formerData + "\n" + cont;
			};
			rd.readAsBinaryString(f);
	}
}

 

你可能感兴趣的:(vue)