需求: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啦