el-upload如何设置在图片完全展示出来之前展示loading图

在使用el-upload组件时，可以通过设置loading属性实现在图片完全展示出来之前展示loading图。具体步骤如下：

1. 首先，在el-upload组件中设置loading属性为true。
例如：```<el-upload :loading="true"></el-upload>```

2. 确保在el-upload组件中的file-list属性中有要展示的图片信息。可以通过v-for指令遍历展示图片列表，并设置图片的url属性，如：

  <img v-for="item in fileList" :src="item.url" alt="">
</el-upload>```

3. 接下来，在el-upload组件外部设置一个监听器，在图片完全加载成功后将loading属性设置为false。
例如：```<template>
  <el-upload :loading="loading">
    <img v-for="item in fileList" :src="item.url" alt="">
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        { url: '图片1的URL' },
        { url: '图片2的URL' },
        { url: '图片3的URL' }
      ],
      loading: true
    }
  },
  mounted() {
    const imageList = document.querySelectorAll('img') // 获取所有图片元素
    let loadedCount = 0 // 已加载的图片数量
    const total = imageList.length // 图片总数

    const onLoad = () => {
      loadedCount++
      if (loadedCount === total) {
        this.loading = false // 如果所有图片都加载完成，设置loading属性为false
      }
    }

    imageList.forEach(img => {
      if (img.complete) { // 如果图片已经加载完成，则直接执行onLoad
        onLoad()
      } else { // 否则添加load事件监听器
        img.addEventListener('load', onLoad)
      }
    })
  }
}
</script>```

上述代码中，监听器会遍历图片元素，并判断每个图片是否加载完成。如果已加载完成，则直接执行onLoad函数；否则，为图片元素添加load事件监听器，在加载完成时执行onLoad函数。当所有图片都加载完成后，loading属性会被设置为false，此时loading图也会被隐藏，图片会完全展示出来。

通过以上步骤，便可以在el-upload组件中设置loading属性，使其能在图片完全加载之前展示loading图。