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

一、获取文件名及后缀

用到的知识点

• 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>