antd-vue upload组件 文件回显
antd-vueupload文件回显
·
<a-form-item label="上传文件">
<a-upload
name="file"
:file-list="fileList"
:before-upload="beforeUpload"
:customRequest="customRequest"
v-decorator="['file', { rules: [{ required: true, message: '请上传文件' }] }]"
>
<a-button> <a-icon type="upload" /> 上传文件 </a-button>
</a-upload>
</a-form-item>pt
methods
// 设置表单回显数据
setInitalValue(file) {
const { fileName, id, fileUrl } = file
const param = {
name: fileName,
url: fileUrl,
uid: id,
status: 'done',
}
const blob = new Blob([fileUrl], { type: 'text/plain;charset=utf-8' })
const textContain = this.transToFile(blob, fileName, 'text/plain')
textContain.then((res) => {
this.file = res //File 对象
this.form.setFieldsValue({ file: res })
})
// form是写在modal中所以采用this.$nextTick()
this.$nextTick(() => {
this.fileList.push(param)
})
},
async transToFile(blob, fileName, fileType) {
return new window.File([blob], fileName, { type: fileType })
},
更多推荐
已为社区贡献1条内容
所有评论(0)