解決element 照片牆根據圖片地址回顯的問題

首先我們先來看html的部分

<el-upload
            :data="Token"   //上傳時附帶的額外參數
            :action="tool.Request.file + '/api/post/file'"  //上傳服務器的地址
            list-type="picture-card"
            :limit='9'  //最大允許上傳9個圖片
            :file-list="fileList"  //回顯我們需要用到此參數
            :before-upload="beforeUpload" //上傳文件之前的鈎子
            :on-success="handleAvatarSuccess" //文件上傳成功時的鈎子
            :on-preview="handlePictureCardPreview" //點擊文件列表中已上傳的文件時的鈎子
            :on-remove="handleRemove"> //文件列表移除文件時的鈎子
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">  //這是點擊放大圖片
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

data部分

fileList:[],

dialogVisible:false,

dialogImageUrl:''

接下來我們看js部分

//res.result.fileArray 是后端返回我上傳的圖片數組
注意：放到fileList里面的圖片地址格式為[{url:'xxxxxx.png'},{url:'xxxxxx.png'}]

let listarray = JSON.parse(res.result.fileArray)
          listarray.forEach(item => {
            let obj = {
              url:this.tool.Request.server + item  //后端反我的是半截地址，我自己需要拼接前面的部分
            }
            this.fileList.push(obj) //這個時候就能看見回顯了，如下圖，（但是當我點擊移除某一個圖片的時候會報錯，處理辦法看我移除時的函數）
          })

 

 

//這是我們上傳成功時的函數
handleAvatarSuccess(res, file){
      if(res.errorCode === 200){
        this.fileArray.push(res.result) //這點我們把沒次上傳成功的圖片地址裝到 fileArray里面 (我這點是收集起所有上傳的圖片地址，后面點擊提交的時候傳給后端) this.tool.Messages(this,'success','上傳成功！') //這是我封裝的消息提示，可以不用管
      }else{
        this.tool.Messages(this,'error','上傳失敗！')
      }
    },

//這是我們點擊移除時的函數
handleRemove(file, fileList) {
      this.fileArray = [] //初始化我裝圖片地址的容器，（我需要傳給后端的）
      fileList.forEach(item => {
        try{
          this.fileArray.push(item.response.result) //這是還沒有上傳到服務器的時候，移除某一個圖片的
        }catch(e){ //當拋出異常時的處理 this.fileArray.push(item.url) //回顯之后，移除某一個圖片
        }
      })
    },