自研组件<二>上传图片/视频组件

组件名: y-upload

效果图:在这里插入图片描述

组件需要适应的场景:

1、可在表单中配置
2、支持预览,编辑模式
3、支持上传图片、视频,默认图片
4、可配置上传个数,如果未配置,默认1,最大99
5、有上传中,上传完成,重新上传的状态,可删除,放大预览
6、可回填

支持在表单中配置

组件参数必须与表单中其他组件参数统一
在这里插入图片描述

支持图片、视频:

选择图片 --> chooseImage()
选择视频 --> chooseVideo()
选择图片或视频 -> chooseMedia
共同的参数:
count: 最多可以选择的文件个数 ---->chooseVideo是没有此参数,其他两个api的手机上默认最大值是9
sourceType: 【‘album’, ‘camera’】图片或视频选择的来源
在这里插入图片描述

上传的状态:

在这里插入图片描述在这里插入图片描述

放大预览:

a. 预览图片
previewImage()
在这里插入图片描述

b. 预览视频
目前的做的是用弹窗展示视频,后期再优化

可回填:

注意点:props.modelValue需要watch, 因为表单中会有异步的问题

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Misha韩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值