小程序js判断是否为图片

根据后端传过来的数据,判断是否为图片,显示不同的图标:
效果图:

数据如下:

meetingAttachments: [{id: 51,file_url: "https://meet.com/storage/files/参赛队伍.png"}, {id: 52,file_url: "https://meet.com/storage/files/竞赛时间表.png"}, {id: 61,file_url: "https://meet.com/storage/files/北京大学火麒麟.docx"}, {id: 62,file_url: "https://meet.com/storage/files/清华大学Tiger.docx"}, {id: 63,file_url: "https://meet.com/storage/files/首都体育学院雄狮.docx"}, {id: 64,file_url: "https://meet.com/storage/files/中国人民大学熊猫.docx"}]

js:

function checkImgType(fileName) { //判断是否是图片//用文件名name后缀判断文件类型，可用size属性判断文件大小不能超过500k ， 前端直接判断的好处，免去服务器的压力。 if (!/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileName)) {return false;} else {return true;}
}

调用:

  for (const jj in meetingAttachments) { //遍历截取出文件名var url = meetingAttachments[jj].file_url;var appU = url.split('/');if (checkImgType(appU[appU.length - 1])) {meetingAttachments[jj].type = 'pic';} else {meetingAttachments[jj].type = 'text';}}

wxml:

 <view class="cu-list grid"><view class="cu-item" wx:for="{{meetingAttachments}}" wx:key="item" ><view class="cuIcon-{{item.type}} text-blue" data-idx="{{index}}" bindtap="downloadFile"></view><text data-idx="{{index}}" bindtap="downloadFile">{{item.name}}</text></view><text wx:if="{{meetingAttachments.length==0}}">暂无附件</text></view>

这样就可以了实现上图的效果了

如果你感觉有收获，欢迎给我打赏 ———— 以激励我输出更多优质内容

小程序js判断是否为图片相关推荐

小程序 js 判断字符串为空 null
判断字符串是否为空 1 2 3 4 5 var strings = ''; if (string.length == 0) { alert('不能为空'); } 判断字符串是否为"空&quo ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
小程序实现长按删除图片
小程序实现长按删除图片说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何 ...
微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
微信小程序，动态改变背景图片
前言,作为开发新人,最近在学习微信小程序,期间遇到不少问题,对问题的解决的方法进行记录,以供学习之用. 关于微信小程序的背景图片问题, 1.微信小程序不能使用本地的图片设置背景图片,即 <vie ...
微信小程序淘宝首页双排图片布局排版代码
小程序淘宝首页双排图片布局排版代码效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: < ...
小程序上传文字和图片到服务器并保存在数据库
简单来说是先执行upload到后台,controller将图片保存到服务器后将图片路径通过json返回小程序,在upload sucess时setData存储路径.然后调用wx.request.下面, ...
小程序js+django+服务器后台搭建流程总结（第五周学习记录）
学习记录这周的工作依然是做一些服务器的调试工作,但是为了方便这周末的展示,我打算把这段时间的所有后台搭建工作和对所有服务器的操作流程做一个系统的总结和归纳,方便学习记录与交流一.微信小程序js部分 ...

小程序js判断是否为图片

小程序js判断是否为图片相关推荐

最新文章

热门文章