antd-vue上传文件,并读取文件内容
需求:antd-vue 点击上传wsdl文件,先读取wsdl文件中的内容进行展示。上传使用 a-upload 组件vue页面代码<a-form :form="form"><a-form-itemlabel="WSDL文件":labelCol="{xs: { span: 24 },sm: { span: 3}}":wrapperCol="{xs: { span: 24 },sm:
·
需求: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啦
更多推荐
已为社区贡献1条内容
所有评论(0)