vue 附件上传获取附近内容_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);

}

}