el-upload多张图片上传回显删除

template

setImag是获取url进行回显，这是根据后台返回数据写的（怎么写看后台数据结构是什么样的）

<el-table-column prop="pic" label="服务图片" >
        <template slot-scope="scope">
          <img :src="scope.row.pic?setImag(scope.row.pic): null"  style="width:80px;height:60px"/>
        </template>
</el-table-column>

data数据结构

看后台需要哪些数据，自行修改

uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
 headers: {
   Authorization: "Bearer " + getToken()
 },
 // 服务类型
 medicalData:{
   type:3,
   source: 3,
 },
 fileList: [],

methods

// 图片
    setImag(val) {
      return  JSON.parse(val)[0].url
    },
    handleRemove(file) {
      const index = this.fileList.findIndex(item => item.uid===file.uid )
      this.fileList.splice(index,1)
    },
    successMedical(file,fileList) {
      if(fileList.response.code === 200) {
        this.$message.success('上传成功')
        this.fileList.push(fileList.response.data)
      }
    },