vue+elementUI上传图片/文件，编辑时回显文件名

回显文件名

HTML代码块：

<el-form-item label="上传" :label-width="formLabelWidth" prop="file">
    <el-upload
     style="width: 80%;"
     v-model='form.file'
     ref="upload"
     class="upload-demo"
     action="/backend/FileLibrary/form/multiple"
     :headers= "headerToken"
     :on-success="uploadSuccess"
     :file-list="fileList"
     :on-change="fileChange"
    >
    <el-button slot="trigger" size="small" type="primary" >选取文件</el-button>
    </el-upload>
</el-form-item>

js代码块：

1. 上传功能

uploadList: [],
fileList: [],
form:{
	file: [],
}

methods: {
//上传
        fileChange(file, fileList) {
          this.fileList = fileList;
        },
        submitUpload() {
          let param = new FormData();
          console.log(this.fileList)
          this.fileList.forEach(file => {
          param.append("file", file.raw); 
          param.append("name", file.name); 
        });
        
        // this.$refs.upload.submit();
        this.uploadImgList(param)
        },
        uploadImgList(param) {
          const self = this
          let config = {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'token': sessionStorage.getItem('token')
            }
          }
          axios.post("/backend/FileLibrary/form/multiple", param, config).then(res => {
            console.log('res')
            console.log(res)
            self.form.file = res.data.data.webUrlList
          
          }).catch(res => {
            console.log(res)
          })
        },
        uploadSuccess: function(response, file, fileList) {
          console.log(response)
          console.log(file)
          console.log(fileList)
          this.form.file = response.data.webUrlList
          console.log(this.form)
        },
        handleCurrentChange: function (val) {
          this.currentPage4 = val;
          this.getProjectList();
        },
        handleSizeChange: function (val) {
          this.currentPage4 = 1;
          this.pageSize = val;
          this.getProjectList();
        },
}

2. 获取数据并回显

getProjectList: function () {
          //debugger
          axios.get("后端接口",{
            params: {
              //按需传值
            },
              headers: {
                'token': sessionStorage.getItem('token'),//获取当前token值
                'Content-type': 'Content-Type: multipart/form-data'
              }
            }).then((response) => {
              let vm = this;
              if(response.data.data.records[0].file) { //后台返回的文件链接
                let a = (response.data.data.records[0].file).split(',');
                  if(a.length > 0) {
                    a.forEach(item => {
                        var obj = {} 
                          let index = item.lastIndexOf('\/');
                          let fileName  = item.substring(index + 1, item.length); //最后的文件名截取出来
                          vm.$set(obj,'name',fileName);
                          vm.$set(obj,'url',item);  //修改files里面的结构（name,url）
                          vm.fileList.push(obj);
                      })
                  }
                  
              }
            })
            .catch(function (error) {
              console.log(error)
            });
        },

效果预览：