参考大佬   http://www.php.cn/js-tutorial-393595.html

一、最终效果

如下

点击导入按钮，选择txt文件

这个是txt文本的内容

最终显示在textarea中的格式

二、代码实现原理：

使用vue文件阅读器组件fileReader结合input  type='file'来完成，然后修改input格式

三、实现步骤

3.1首先建立fileReader组件，内容如下，可以直接用

<template id="fileReader">
  <div>
    <span>
      <input type="file" @change="loadTextFromFile">
    </span>
  </div>
</template>
<script>
export default {
  methods: {
    loadTextFromFile: function(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = e => this.$emit("load", this.dealNum(e.target.result));
      reader.readAsText(file);
    },
    // 处理数字
    dealNum(item) {
      item = item.replace(/[^0-9]/g, ""); //不能 输入非数字
      item = this.sliceArr(item); //两位一组排成新数组
      // 去重
      Array.prototype.reArr = function() {
        var newArr = [];
        for (var i = 0; i < this.length; i++) {
          if (newArr.indexOf(this[i]) == -1) {
            newArr.push(this[i]);
          }
        }
        return newArr;
      };
      item = item.reArr(); //数组去重
      let array = item;
     
      //每两位数字之间搁一个空格
      let result = [];
      for (let i = 0; i < item.length; i++) {
        result.push(" " + item[i]);
      }

      item = result.join(""); //数组变成字符串
      return item;
    },
    //两位一组排成新数组
    sliceArr(item) {
      let arr = [];
      if (item.length <= 1) {
        arr.push(item);
        return arr;
      }
      for (let i = 0; i < item.length; i++) {
        if (i % 2 === 0) {
          let str = "";
          str = item.charAt(i) + item.charAt(i + 1);
          arr.push(str);
        }
      }
      return arr;
    }
  }
};
</script>

3.2在父组件中引入

//在template中@input监听输入@keyup键盘抬起@afterpaste表示复制内容粘贴完
                    <textarea
                      class="qeInput"
                      v-model="qeInputValue"
                      @input="qeInput"
                      @keyup="qeInput"
                      @afterpaste="qeInput"
                      cols="30"
                      rows="10"
                    ></textarea>
                   <!-- 用span包住导入按钮的span和input是为了对input type='file'做样式处理 -->
                      <span class="qeBtnBg">
                        <span class="leadBtn">导入</span>
                <!-- @load="qeInputValue = $event"这句话表示导入的文件内容显示在textarea中 -->
                        <fileReader @load="qeInputValue = $event" class="qeBtnInput"></fileReader>
                      </span>

//script中
import fileReader from "./fileReader";
export default {
  components: {
    // Bet,
    fileReader
  },
  data() {
    return {
              qeInputValue: ""
            }
    },
methods:{
    qeInput() {
      var value = this.qeInputValue;
      //不能 输入非数字
      value = value.replace(/[^0-9]/g, "");
      value = this.sliceArr(value); //两位一组排成新数组
      // 去重
      Array.prototype.reArr = function() {
        var newArr = [];
        for (var i = 0; i < this.length; i++) {
          if (newArr.indexOf(this[i]) == -1) {
            newArr.push(this[i]);
          }
        }
        return newArr;
      };
      value = value.reArr(); //数组去重
      let array = value;
      //每两位数字之间搁一个空格
      let result = [];
      for (let i = 0; i < value.length; i++) {
        result.push(" " + value[i]);
      }

      this.qeInputValue = result.join(""); //数组变成字符串
      // console.log(array)
    }
}
   }

//style
.qeInput {
  width: 80%;
  height: 240px;
}
.qeBtnBg {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.qeBtnInput {
  position: absolute;
  right: 0px;
  top: 0px;
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
}
.leadBtn {
  border-radius: 4px;
  background-color: rgba(198, 126, 10, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  padding: 10px 34px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0);
}