首页 > 其他分享 >如何使用 button 唤起 uni-app 的 uni-file-picker

如何使用 button 唤起 uni-app 的 uni-file-picker

时间:2022-11-08 10:12:10浏览次数:53  
标签:picker button 头像 file 组件 uni app

最近碰到一个需求,就是在头像下方可以点击更换头像,同时,点击头像也可以更换头像。因为项目用的是 uni-app ,所以说到上传头像,就想到了 uni-file-picker,但是我翻完了 uni-file-picker 的文档内容,发现没有可以唤醒的方法,但是这个需求很合理,所以只能硬着头皮下了组件源码,打算自己改造一下。

将组件下载后,导入项目,看了看组件的 methods 对象,一阵无语荡漾在我的心头。methods 对象中,明晃晃的包含了唤醒的方法,这下好了,直接 ref 调用它的方法,完美。

调用用例:this.$refs['file-picker']?.choose()

标签:picker,button,头像,file,组件,uni,app
From: https://www.cnblogs.com/FreezeNow/p/16868713.html

相关文章

  • uniapp/微信小程序 项目day03
    一.商品列表1.1获取数据首先能够进入商品列表的途径传的数据有了解了这个之后就可以开始了,先创建分支创建编译模式,并分配初试数据这个时候就可以获取数据了......
  • Uninstall Haskell.ps1
    $decision=$Host.UI.PromptForChoice('UninstallHaskell','Doyouwanttouninstallallofthehaskelltoolchain,includingGHC,Cabal,StackandGHCupitself......
  • unity游戏开发随记
    今天做一个scrollview下面list的动画,效果大概是:从右侧一个接一个滑倒左侧。因为父节点是用VerticalLayoutGroup做的所以我一开始想的是,scrollview获取子节点列表,然后传......
  • uni-app基本了解
    安装HBuilderX推荐使用HBuilderX开发uni-app,可以在​​官网​​下载。我们如果下载的是标准版,那我们在HBuilderX运行的时候会帮我们下载一些uni-app插件,我们重启一下项目就......
  • 在uni-app中引入uView
    在uni-app中引入uView的方式有两种:通过npm下载//如果您的根目录没有package.json文件的话,请先执行如下命令://npminit-ynpminstalluview-ui//更新//npmupdateuvi......
  • uni-app框架开发app中出现的问题(持续更新中...)
    uni-app框架开发app中出现的问题​​uview中图标不显示​​​​无法使用彩色iconfont​​​​滚动回顶部​​​​监听横屏和录屏的变化​​​​ucharts双指缩放24小时曲线​......
  • 处理uniapp激励广告
    使用uniapp查看广告getAdsItem(item){//看广告//console.log(item.adTitle,item)if(app.getIsVisitor()){......
  • uniapp自定义组件的使用--记录
    在pages.json同级目录下创建目录和文件:components:  videoComp:VideoPlaySelf.vueVideoPlaySelf.vue内容<template><videoclass="video"id="myVideo"......
  • uniapp引入微信小程序自定义视频组件--记录
    官方文档:https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject.html在pages.json同级目录下创建目录和文件:wxcomponents:   my-video-play:index.js ......
  • uniapp小程序微信支付功能
    小程序支付https://blog.csdn.net/lwx931449660/article/details/122530586 uniapp小程序微信支付功能已于2022-09-2810:38:34修改字段说明前置工作获取......