一、获取文件名及后缀
用到的知识点
-
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
-
substring(beginindex,endindex)截取从开始索引beginindex到索引是endindex结束
js
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-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-success="onSuccessUpload"
:file-list="detailFileList"
>
<i class="el-icon-plus"></i>
</el-upload>
js
<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>