标签：读取 temp FileReader lastIndex js input event target

文件形式：txt

实现：

<template>
    <div class="hello">
        <h1>This is a show file page</h1>
        <h3>导入文件：<input type="file" name="file" @change="showFile($event)" /> </h3><br>
        <textarea v-model="input_text" name="" cols="100" rows="20" placeholder="输入……"></textarea><br><br>
    </div>
</template>

<script>
    export default {
        name: "Hello",
        data: function() {
            return {
                input_text: ''
            }
        },
        methods: {

            showFile(input) {
                //支持chrome IE10
                if (window.FileReader) {
                    var file = input.target.files[0];
                    var reader = new FileReader();
                    reader.onload=((event)=>{
                        this.input_text=event.target.result; // 文件的内容
                        console.log(String(event.target.result))
                        let temp = JSON.stringify(event.target.result).split('\\r\\n')
                        temp[0] = temp[0].substr(1)
                        let lastIndex = temp.length-1
                        temp[lastIndex] = temp[lastIndex].substr(0,temp[lastIndex].length-1)

                    })
                    reader.readAsText(file);
                }
                else {
                    alert("FileReader Not supported by your browser!");
                }
            }
        }
    }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
</style>

标签：读取,temp,FileReader,lastIndex,js,input,event,target
来源： https://www.cnblogs.com/lololo/p/16259633.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。