elementui的Upload组件实现图片上传回显功能

elementui官方文档 Element - The world's most popular Vue UI framework

阅读官网 发现主要通过filt-list来进行回显  要把后端的传回来的数据改为 有url的格式 如下图

代码展示

<el-upload
     :action="upurl" 
     :headers="upheaders"
     :limit="10"
     list-type="picture-card"
     :on-preview="handlePreview"
     :on-remove="handleRemove"
     :on-success="handleSuccess"
     :on-error="handleError"
     :file-list="fileList" 
     :class="{ disabled: uploadDisabled }"
     ref="upload">
 </el-upload>

我们在页面获取接口数据的地方 ，改为 有url的格式来进行回显

 this.fileList = res.data.list.item_image.map(t => {
      var obj = {}
      obj.url = t
      return obj
  })

res.data.list.item_image 为接口返回的图片数组 

页面就可以进行回显了

图片回显后我们要对个别图片进行删除 主要是 :on-remove="handleRemove"

他有两个参数 如果我们只需要把图片的url 都放在一个数组里，传给后端

 handleRemove(file, fileList) {
     let arr = []
     for (let i of fileList) {
        arr.push(i.url);
      }
     this.detilData.item_image = arr
},

this.detilData.item_image 就是我们传过去的数组