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

本文介绍: 阅读官网发现主要通过filt–list来进行回显要把后端的传回来的数据改为有url的格式如下图。图片回显后我们要对个别图片进行删除主要是 :on–rem ov e=”handleRemo v e“t h i s.de tilDa t a.item _image 就是我们传过去的数组。res.data.list.item _image 为接口返回的图片数组。他有两个参数如果我们只需要把图片的url 都放在一个数组里，传给后端。我们在页面获取接口数据的地方，改为有url的格式来进行回显。elementui 官方文档。

elementui 官方文档 Element – The world’s most popular Vue UI framework

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

代码展示

&lt;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"&gt;
 </el-upload&gt;

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

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

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

页面就可以进行回显了

图片回显后我们要对个别图片进行删除主要是 :on–rem ove=”h andleRemo ve”

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

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