获取文件名，文件名后缀以及elementui多张图片回显

一、获取文件名及后缀

用到的知识点

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
substring(beginindex,endindex)截取从开始索引beginindex到索引是endindex结束

var path="文件名.ppt"var index=path.lastIndexOf(".");var extension=path.substring(index+1,path.length);//index是点的位置。点的位置加1再到结尾var name=path.substring(0,index);

二、多张图片回显

用到的知识点

el-upload组件中的:file-list="detailFileList"

三、查看完整代码

html

 <el-uploadaction="https://jsonplaceholder.typicode.com/posts/"list-type="picture-card":on-success="onSuccessUpload":file-list="detailFileList"><i class="el-icon-plus"></i></el-upload>

<script>
export default {data() {return {detailFileList: [],imgUrl: '@/assets/11.png,@/assets/22.png',backUrl:'http://s3.caiwu.corp/gbcfapp-public-read/channeladmin/f5d797c94403470c99b38419217c562d.png'};},methods: {// 上传完单张图片onSuccessUpload(response, file, fileList) {console.log(response, 'res', file);},formatUrlFn() {// 获取文件名及后缀let index= this.backUrl.lastIndexOf(".");let extension=this.backUrl.substring(index+1,this.backUrl.length);//index是点的位置。点的位置加1再到结尾let fileName= this.backUrl.substring(0,index);// fileName.split("/")[fileName.split("/").length-1]console.log( fileName.split("/")[fileName.split("/").length-1],'--fileName--')console.log(extension,'--extension--')// 回显多张图片地址for(let i=0;i<this.imgUrl.length;i++){let bgUrl = {}bgUrl.url = this.imgUrl[i]this.detailFileList.push(bgUrl)}console.log('this.detailFileList', this.detailFileList)},},mounted() {this.imgUrl = this.imgUrl.split(",")this.formatUrlFn()},
};
</script>

获取文件名，文件名后缀以及elementui多张图片回显相关推荐

ElementUI级联框回显问题
每一次错误的发生都是成长的开始! 在开发中使用Element的级联框回显后台返回的数据时产生了回显异常的问题.产生的问题点是各级联中已经选中正确的数据了,但是数据框中没有数据显示出来.如图: 正确显示 ...
elementUI checkbox选中回显操作注意事项
具体的详情介绍请看,elementUI checkbox. checkbox的回显操作是基于 el-checkbox-group 标签v-module绑定的数组来实现回显,这个数组可以是一维数组,也可 ...
Element-ui表格选中回显
先瞄一下,是不是你要的效果然后,废话不多说,直接上代码啦 1 <template> 2 <div class> 3 <div class="projectDa ...
Android 文件下载，根据url获取真正的文件名和后缀名（包括重定向的url）
Android文件下载时,有时候我们需要根据url拿到要下载文件的名字和后缀. url分两种, 一种是静态url:即url后面就是文件名,例如:https://qd.myapp.com/myapp/q ...
c#文件名去掉后缀_C#如何从文件路径中分离出文件名以及文件扩展名
在C#文件操作的过程中或者Asp.Net文件的处理过程中,有时候知道文件的完整路径信息后,需要从完整路径中分离出文件名以及文件的后缀名等信息,此文将简要介绍C#语言如何从文件路径中分离出文件名以及文件 ...
【GameMaker】分离文件路径、文件名、后缀
对于Windows和MacOS的构建目标,YoYoGames官方提供了一系列用于获取文件路径的函数. get_open_filename get_open_filename_ext get_save_ ...
php 批量改文件名后缀名_PHP 批量修改文件名/文件后缀名（扩展名）
今天我有几千个文件要一次修改文件或把后缀名给改了,但是我要手工一个个去改,不得改几天后来想到一个办法,利用php写一个量修改文件名/文件后缀名程序,一下就实现了,下面来看看方法. 几个关键的函数. i ...
C#实现根据字体名称获取字体文件名
<简单测试.NET开源的PDF文档生成器QuestPDF>中提到,绘制文字时指定字体用的不是字体名称,而是字体文件名.之前学习C# GDI+.HTML5中的Canvas.Tkinter ...
Matlab与数据结构 -- 如何获取完整文件名
本图文介绍了Matlab中获取完整文件名的函数fullfile().
find的命令的使用和文件名的后缀
find的命令的使用和文件名的后缀除了find 还有其他的搜索命令,不过没有find功能强大,了解即可 ! root@alex ~]# which pwd /usr/bin/pwd [root@a ...

获取文件名，文件名后缀以及elementui多张图片回显

一、获取文件名及后缀

用到的知识点

二、多张图片回显

用到的知识点

三、查看完整代码

获取文件名，文件名后缀以及elementui多张图片回显相关推荐

最新文章

热门文章