解决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:[]

接下来我们看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) //回显之后，移除某一个图片
        }
      })
    },