前端JavaScript读取上传文件信息

<template>
    <div>
        <el-upload
            class="upload-demo"
            drag
            action=""
            :show-file-list="false"
            :http-request="uploadFile"
            multiple
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
                <p>注意一行不能超过1024字节</p>
            </div>
        </el-upload>
    </div>
</template>

<script>
export default {
    data() {
        return {
            input: "",
            file: null,
        };
    },
    methods: {
        uploadFile({ file }) {
            this.file = file;

            if (this.file.type != "text/plain") {
                this.$message.error("仅支持上传txt");
                return;
            }
            let reader = new FileReader();
            console.log("reader", reader);
            reader.onload = (evt) => {
                if (evt.target.readyState !== 2) return;
                if (evt.target.error) {
                    console.log("Error while reading file");
                    return;
                }

                const chunkContent = evt.target.result || "";
                let reg = /(rn?|n)/gm;
                let result;
                if ((result = reg.exec(chunkContent)) !== null) {
                    //读取一行
                    // let cursor = result.index;
                    // this.input = chunkContent.substr(0, cursor);
                    // 读取指定行数
                    console.log("chunkContent", chunkContent.split(/s+/, 10));
                    this.input = chunkContent.split(/s+/, 10).map(Number);
                    console.log("input", this.input);
                } else {
                    this.input = chunkContent;
                    console.log("chunkContent".chunkContent);
                }

                this.file = null;
            };

            reader.readAsText(this.file.slice(0, 1024));
        },
    },
};
</script>

<style>
</style>