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

最新推荐文章于 2025-05-21 09:56:36 发布

原创

最新推荐文章于 2025-05-21 09:56:36 发布 · 1.7w 阅读

39 ·

CC 4.0 BY-SA版权

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

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


<el-upload action="/"
        ref="upload"
		accept=".txt"			                      
		:before-upload="beforeUpload"
		:disabled="this.fileList.length !== 0"			                         
		:default-file-list="this.fileList"
		>
<el-button type="primary" :disabled="this.fileList.length !== 0">上传文件</el-button>
</el-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函数中，完成公共处理