浅析AntdV Upload组件customRequest怎么自定义上传方法

AntdV Upload组件customRequest怎么自定义上传方法?下面本篇文章给大家介绍一下Ant Design Vue 的Upload 组件customRequest自定…

AntdV Upload组件customRequest怎么自定义上传方法?下面本篇文章给大家介绍一下Ant Design Vue 的Upload 组件customRequest自定义上传方法,希望对大家有所帮助!

浅析AntdV Upload组件customRequest怎么自定义上传方法

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

需求场景

后台管理系统,UI框架是Ant Design of Vue上传图片用的是Upload组件。

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

实现方法

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

customRequest自定义上传方法<a-form-item:labelCol="labelCol":wrapperCol="wrapperCol"label="照片"><a-uploadv-decorator="['zp',validatorRules.zp]"listType="picture-card"class="avatar-uploader":showUploadList="false":beforeUpload="beforeUpload":customRequest="selfUpload"><imgv-if="picUrl":src="getAvatarView()"alt="头像"style="height:104px;max-width:300px"/><divv-else><a-icon:type="uploadLoading?'loading':'plus'"/><divclass="ant-upload-text">上传</div></div></a-upload></a-form-item>

上传的图片转为base64

//对上传的文件处理selfUpload({action,file,onSuccess,onError,onProgress}){console.log(file,'action,file');constbase64=newPromise(resolve=>{constfileReader=newFileReader();fileReader.readAsDataURL(file);fileReader.onload=()=>{resolve(fileReader.result);//this.formImg=fileReader.result;}});}

产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;

日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉

本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;

部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入

如若转载,请注明出处:https://www.chanpinyuan.cn/39347.html;
(0)
上一篇 2023年3月17日 下午4:19
下一篇 2023年3月17日 下午4:19

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部