antd-vue上传文件，并读取文件内容

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

上传使用 a-upload 组件

vue页面代码

 <a-form :form="form">
	   <a-form-item
      label="WSDL文件"
      :labelCol="{xs: { span: 24 },sm: { span: 3}}"
      :wrapperCol="{xs: { span: 24 },sm: { span: 20 }}"
      has-feedback
    >
      <a-textarea :rows="4" placeholder="上传WSDL文件" v-decorator="['serviceWsdl',{rules:[{required: true, message: '请上传WEDL文件！' }]}]"></a-textarea>

      <a-upload
        accept=".wsdl"
        :beforeUpload="beforeUpload"
        :showUploadList="false"
        name="file"
      >
        <a-button>
          上传
        </a-button>
      </a-upload>

    </a-form-item>
</a-form>

js代码

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：{
	/**
	 * 上传wsdl,并解析文件
	 */
	beforeUpload(file) {
	  console.log('上传前校验--文件类型', file)
	  this.fileList = [file]
	  console.log('选择了文件beforeUpload', this.fileList)
	  // 读取数据
	  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)
	    // 这个是我前端页面填充读取的wsdl数据的
	    this.form.setFieldsValue({ serviceWsdl: cont })
	    let  formerData = this.textData
	    this.textData = formerData + "\n" + cont
	  }
	  rd.readAsBinaryString(f)
	},
}

ok啦