温馨提示  2024年 6月我们已经停止开发者板块文章内容更新,谢谢来访。存档数据
知识 2023-08-29 34 次阅读

浅析antdv upload组件customrequest怎么自定义上传方法

    antdv upload组件customrequest怎么自定义上传方法?下面本篇文章给大家介绍一下ant design vue 的upload 组件customrequest自定义上传方法,希望对大家有所帮助!

customrequest 可以自定义自己的上传方法

需求场景

后台管理系统,ui框架是ant design of vue上传图片用的是upload组件。

需求描述上传图片,转为base64

实现方法

api方法中,有一个自定义上传行为的方法,通过覆盖默认的上传行为,可以自定义自己的上传实现

customrequest自定义上传方法<a-form-item :labelcol=labelcol :wrappercol=wrappercol label=照片> <a-upload v-decorator=['zp', validatorrules.zp] listtype=picture-card class=avatar-uploader :showuploadlist=false :beforeupload=beforeupload :customrequest=selfupload > <img v-if=picurl :src=getavatarview() alt=头像/> <div v-else> <a-icon :type=uploadloading ? 'loading' : 'plus' /> <div class=ant-upload-text>上传</div> </div> </a-upload></a-form-item>上传的图片转为base64//对上传的文件处理selfupload ({ action, file, onsuccess, onerror, onprogress }) { console.log(file, 'action, file'); const base64 = new promise(resolve => { const filereader = new filereader(); filereader.readasdataurl(file); filereader.onload = () => { resolve(filereader.result); // this.formimg = filereader.result; } });}