uni-ui 中 uni-file-picker组件限制用户上传大小超过大小自动去除

这篇具有很好参考价值的文章主要介绍了uni-ui 中 uni-file-picker组件限制用户上传大小超过大小自动去除。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uni-ui 中 uni-file-picker组件限制用户上传大小超过大小自动去除

找到该组件位置打开uni-file-picker

uni-file-picker限制大小,ui,javascript,前端

在props中添加自己想起的名字绑定限制大小

props: {
   		maxMb:{
   			type:Number,
   			default:1
   		}
   		}

找到chooseFileCallback方法插入代码:

// 限制大小
			for (var i = 0; i < files.length; i++) {
				let s = files[i].size / (1024 * 1024)
				if (s > this.maxMb) {
					uni.showToast({
						title: '大于'+this.maxMb+'MB,以去除相关图片',
						icon: "none"
					});
					res.tempFiles.splice(i)
				}
			}

其他页面调用即可文章来源地址https://www.toymoban.com/news/detail-791591.html

 <uni-file-picker :maxMb="5"  limit="6">
					</uni-file-picker>

到了这里,关于uni-ui 中 uni-file-picker组件限制用户上传大小超过大小自动去除的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp中使用uni-file-picker上传文件

    效果图:

    2024年01月25日
    浏览(64)
  • 使用uni-file-picker上传文件(图片)到腾讯云存储COS步骤

    微信小程序上传文件到腾讯云存储COS: 准备步骤: 1.拿到腾讯云的API密钥:在API密钥管理中获取SecretId和SecretKey,没有的话生成一个 2.开通COS存储创建存储桶,需要拿到存储桶名字和所在地域 3.打开对象存储的产品文档进入SDK文档里的小程序SDK里面有源码下载地址 主要是为了

    2024年02月07日
    浏览(47)
  • uni-file-picker上传图片到后端服务器并存入数据库

    最近在做一个需求,使用uniapp上传用户头像。后端会有一个处理上传图片返回图像链接的接口。在uniapp官网关于上传的组件有两个: (1)uni.uploadFile(object) (2)uni-file-picker 如果使用uni.uploadFile,前端的代码大致可以这样写: 这是官网给出的范例。对应的HTML: 然后就是 自

    2024年02月12日
    浏览(47)
  • uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器(H5上传-微信小程序上传)

    前言 最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能。 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseImage,uni.uploadFile H5上传时它和pc端原理差不多,都是file对象上传,PC端是通过new file对象,uni-app是直接提供了 微信

    2024年02月15日
    浏览(95)
  • uni-app扩展组件(uni-ui)

    目录 数字角标(uni-badge) 代码示例: 面包屑(uni-breadcrumb) 代码示例: 日历 代码示例 卡片(uni-card) 代码示例 倒计时(uni-countdown) 更多内容请访问官网 数字角标一般和其它控件(列表、9宫格等)配合使用,用于进行数量提示,默认为实心灰色背景。 使用方式是在HBuilder中创建项目

    2024年02月15日
    浏览(60)
  • uni-ui简单入门教程 - 如何用HBuilderX为uni-app项目启用uni-ui扩展组件?

    uni-app是一个前端框架 简单来说,uni-app的组件,类似HTML的标签,例如a转navigation、span转text等 uni-app的组件包括 基础组件  (自带免安装) + 扩展组件 (可选装, 官方出品uni-ui 或者第三方) uni-app出品的uni-ui官方手册很 坑爹 ,组件代码是一个文档,效果展示是另一个文档! 【u

    2023年04月08日
    浏览(85)
  • Uniapp之uni-ui-扩展组件(1)

    uni组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components HBuilder插件市场(uni-ui组件库) uni-ui 不支持使用 Vue.use() 的方式安装 npm安装uni-ui库(vue-cli项目需先安装sass及sass-loader,HBuilder可省略) 安装sass:

    2023年04月08日
    浏览(50)
  • uni-ui组件库uni-icons不显示

    按照官方文档用yarn引用了uni-ui组件库并且在pages.json和vue.config.js中配置了相关的内容后使用uni-icon效果如下:   使用uni-icons的地方图标都未显示成功 1-按照 项目名称node_modules@dcloudiouni-uilibuni-icons目录找到uni-icons目录 2-将uni-icons目录放到src目录下的components目录下 3-在pages

    2024年02月15日
    浏览(64)
  • uni-app自定义组件及拓展(uni-ui)组件的使用

    UniApp 是一个基于 Vue.js 的跨平台应用框架,可以用来开发同时运行在多个平台(如微信小程序、支付宝小程序、App等)的应用程序。在 UniApp 中,组件的使用与 Vue.js 中的组件使用基本类似,但需要考虑跨平台兼容性。 1. 创建组件文件 在 UniApp 项目中创建一个新的组件,通常

    2024年04月29日
    浏览(56)
  • uniapp 官方 ui组件库 uni-ui 的uni-data-checkbox 如何实现自定义选中时的边框颜色

    官方组件并不支持这一项自定义,所以选择修改组件库,非常简单,傻瓜式修改。 首先找到该组件文件,这个就不过多赘述了。贴下图:    在props选项中增加一个borderColor变量:  找到设置背景的方法中添加两行代码  然后是使用:  效果:  完结!!!

    2024年02月08日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包