根据文件后缀名动态加载对应图片_根据文件后缀显示不同的文件图片-CSDN博客

本文链接：https://blog.csdn.net/m0_72809383/article/details/135461819

该篇文章描述了一个IT系统中处理文件上传和展示的组件，使用了HTML和JavaScript代码片段。它展示了如何根据文件扩展名动态加载图片或视频，并使用线进度条跟踪文件上传进度。

摘要由CSDN通过智能技术生成

   <view @click="downloadFile(item,i)" class="customCard marginRight" v-if="item.contentsType =='FileUrl'||
                                       item.type=='file' ||
                                       item.contentsType=='FILE'">
                                       <view class="all">
                                           <view class="filePic">
                                               <video v-if="isVideo(item.ext.filename)" :src="item.ext.url"></video>
                                               <image v-else :src="getFileType(item.ext.filename)" mode="widthFix"></image>
                                           </view>
                                           <view class="Bottom" >
                                               <view class="fileName" v-if="!isVideo(item.ext.filename)">
                                                   {{item.ext.filename}}
                                               </view>
                                               <view class="fileSize" v-if="!isVideo(item.ext.filename)">
                                                   大小:{{formatFileSize(item.ext.fileSize) || '未知'}}
                                               </view>
                                           </view>
                                       </view>
                                       <view class="" style="padding: 0 20rpx;">
                                           <u-line-progress v-if="fileIndexes.includes(i)" height="6"
                                               :percentage="percentageValue[i]"
                                               activeColor="#19be6b"></u-line-progress>
                                       </view>

</view>

getFileType(e) {
               const ext = e.split('.').pop()
               if (["apk","exe", "mp3", "pdf", "ppt", "rar", "txt", "word", 'xls', "zip"].includes(
                   ext)) {
                   return require(`@/static/fileicon/${ext}.png`)
               } else if (['doc', 'dot', 'docx', 'rtf'].includes(ext)) {
                   return require('@/static/fileicon/word.png')
               } else if (['xlsx', 'xls'].includes(ext)) {
                   return require('@/static/fileicon/xls.png')
               } else if (['ppt', 'pptx'].includes(ext)) {
                   return require('@/static/fileicon/ppt.png')
               } else {
                   return require('@/static/fileicon/null.png')
               }
           },