element-ui 照片墙

<template>
  <div class="body">
    <span>测试</span>
    <span>照片墙</span>
    <el-upload :file-list="imgList" :action="this.$store.state.updataurl" :headers="headers"
      list-type="picture-card" :on-success="handleSuccess" :on-remove="handleRemove">
      <div>
        <span>点击上传图片</span>
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
    
    
  components: {
    
    
    
  },
  data() {
    
    
    return {
    
    
      imgList: [],
      picUrl: this.$store.state.baseurl,
    }
  },
  computed: {
    
    
    headers() {
    
    
      return {
    
    
        Authorization: this.$store.getters.token || localStorage.getItem("token"),
        // soloFileName: 'goods' //后端标识
      };
    },
  },
  methods: {
    
    
    handleSuccess(response, file, fileList) {
    
    
      if (file.response.code == 200) {
    
    
        // 注意obj对象里url字段
        let obj = {
    
    
          // name:file.response.data.fileName,
          url: this.picUrl + file.response.data.src
        }
        // setTimeout(()=>{   //防止闪烁，后来发现没用，偶尔有用
          // obj = {
    
    
            // name:file.response.data.fileName,
            // url: this.picUrl + file.response.data.src
          // }
        // },200)
        this.imgList.push(obj) //放进去图片
        console.log("handleSuccess", this.imgList)
      }
    },
    handleRemove(item) {
    
    
      this.imgList.forEach(async (v) => {
    
    
        if (v.url == item.url) {
    
    
          // 调用接口删除图片
          const res = await this.$API.Img.deleteFile(item.url)
          if (item.id) {
    
    
            // 删除商品的图片
            const res1 = await this.$API.Img.deleteImg(item.id)
          }
        }
      })
      this.imgList = this.imgList.filter(v => v.url !== item.url)
    },
    
  }
}
</script>

<style lang="less" scoped>

</style>