uniapp/vue根据文件路径后缀显示相应的icon图标，在uniapp中点击文件打开新页面查看文件

wantLG

已于 2024-07-27 09:50:27 修改

阅读量2k

点赞数

分类专栏：小程序uni-app 文章标签： vue 前端 uni-app app

于 2020-12-10 20:38:03 首次发布

本文链接：https://blog.csdn.net/weixin_45491473/article/details/110957525

版权

小程序uni-app 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文前推荐一下👉前端必备工具推荐网站(图床、API和ChatAI、智能AI简历、AI思维导图神器等实用工具):
站点入口：http://luckycola.com.cn/
图床：https://luckycola.com.cn/public/dist/#/imghub
多种API：https://luckycola.com.cn/public/dist/#/
ChatAI：https://luckycola.com.cn/public/dist/#/chatAi
AI思维导图神器：https://luckycola.com.cn/public/dist/#/aiQStore/aiMindPage

uniapp中根据文件路径后缀显示相应的icon图标（vue中同方法），并在点击文件打开新页面查看文件详情

需要准备一套iconfont彩色图标，如果不会在uniapp中使用多色图标，请先移步：uni-app使用阿里iconfont多色图标

先上效果，客官满意的话请继续看
文件后缀
点击文件跳转
在这里插入图片描述

截取文件后缀的方法

通过split方法

var fileUrl = "https://www.baidu.com/f12daf12ds312f1asd.png";
//截取后缀
var suffix = fileUrl.split('.').pop().toLowerCase();
consolg.log(suffix);//png

通过substring方法

var fileUrl = "https://taobao.org/gsdf455gsdf64.docx";
//截取后缀
var suffix = fileUrl.substring(fileUrl.lastIndexOf('.') + 1);
consolg.log(suffix);//docx

结合uniapp/Vue截取后缀显示显示相应的icon图标

先引入多色的iconfont图标，->uni-app使用阿里iconfont多色图标
我这里的iconfont公共类名是icon

记得在App.vue(uniapp中)引入

<style>
   @import url("./style/iconfont_css.css");
   /*每个页面公共css */
</style>

在页面的data中定义

export default {
	data() {
		return {
		  //存放关于文件信息的数组
			aboutFileList: [],
		   //用于筛选后缀名的数组对象
			icon: [
				{
					icon_class: 'icon-file_word',
					suffix: 'doc'
				},
				{
					icon_class: 'icon-file_word',
					suffix: 'docx'
				},
				{
					icon_class: 'icon-file_ppt',
					suffix: 'pptx'
				},
				{
					icon_class: 'icon-file_mp3',
					suffix: 'mp3'
				},
				{
					icon_class: 'icon-file_zip',
					suffix: 'zip'
				},
				{
					icon_class: 'icon-file_xls',
					suffix: 'xls'
				},
				{
					icon_class: 'icon-file_xls',
					suffix: 'xlsx'
				},
				{
					icon_class: 'icon-file-photo',
					suffix: 'png'
				},
				{
					icon_class: 'icon-file-photo',
					suffix: 'gif'
				},
				{
					icon_class: 'icon-file-photo',
					suffix: 'jpg'
				},
				{
					icon_class: 'icon-file-photo',
					suffix: 'svg'
				},
				{
					icon_class: 'icon-file-psd',
					suffix: 'psd'
				},
				{
					icon_class: 'icon-file-txt',
					suffix: 'txt'
				},
				{
					icon_class: 'icon-file-mp4',
					suffix: 'mp4'
				}
			]
		};
	},
}

在methods中请求数据并赋给data中的aboutFileList
在页面中渲染数据

		<!-- 列表渲染-->
	<view v-for="item in filelist" :key="item.id">
             	<!-- fileUrl是数据中的文件路径-->
			<view class="minutes" @click="openFile(item.fileUrl)">
			              
				<view class="minutes_logo">
				<!-- 这里在函数中处理函数，接受一个路径，根据路径获取后缀，最后返回一个类名-->
				    <view :class="parsingSuffix(item.fileUrl)">
				    </view>
				 </view>
				<view class="minutes_right">
				    	<!-- title是数据中的文件名-->
					<view class="minutes_right_context">{{ item.title }}</view>
					<view class="minutes_right_botton">
						<view class="minutes_right_you">发布时间：{{ item.gmtModified }}</view>
					</view>
				</view>
			</view>
	</view>

在methods中定义一个处理后缀名字的函数parsingSuffix

	    //解析出类名
		parsingSuffix(url) {
			// 截取路径“.”后面的字符串
			var suffix = url.substring(url.lastIndexOf('.') + 1);
			// 筛选只有一个子项的数组
			var iconSuffix = this.icon.filter(items => {
			   //拿截取出来的后缀和icon数组中的对比筛选
				return items.suffix == suffix;
			});
			//最后返回一个公共icon + 文件icon类名
			return 'icon ' + iconSuffix[0].icon_class;
		},

这里已经能实现根据文件路径后缀显示相相应的icon图标

uniapp中点击文件打开新页面查看文件

其实很简单，根据文档中新开页面打开文档,上面渲染页面时绑定了一个openFile点击事件，传入参数文件路径
h5端，直接更改window对象中的location属性就行

  openFile(url){
    location.href  =  url;
  }

除了h5端，官方文档openDocument

		openFile(url) {
			uni.openFileFile({
				url: url,
				success: res => {
					if (res.statusCode === 200) {
						uni.openDocument({
							filePath: res.tempFilePath,
							// 如果文件名包含中文，建议使用escape(res.tempFilePath)转码，防止ios和安卓客户端导致的差异
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				}
			});
		},