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

2022-09-02 12:35:50

需求: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=newUint8Array(this.result);//无符号整型数组let text=newTextDecoder(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);returnfalse},/**
	 * 读取数据
	 */read(f){let rd=newFileReader();
	  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.textDatathis.textData= formerData+"\n"+ cont}
	  rd.readAsBinaryString(f)},}

ok啦

  • 作者:甜甜的耶啵
  • 原文链接:https://blog.csdn.net/dqfkkll/article/details/124188834
    更新时间:2022-09-02 12:35:50