闪动图片终结者：一次性解决Element UI多图片上传闪动问题

前端

2023-09-10 23:05:26

如何解决Element UI多图片上传时的闪动问题

问题

使用Element UI上传多张图片时，在图片上传成功后，它们会在image标签中闪动一下，然后才会正常显示。这个问题不仅影响了用户体验，还可能导致一些意外的错误。

问题原因

闪动问题通常是由于使用了不正确的方法导致的。最常见的原因之一是直接将图片的路径设置给image标签的src属性。然而，这种方法会导致浏览器重新加载图片，从而产生闪动效果。

解决方案

为了解决这个问题，我们需要使用一种正确的方法来更新image标签的src属性。具体步骤如下：

获取上传组件的引用 ：使用Element UI的内置方法$refs获取上传组件的引用。
获取已上传的文件列表 ：使用$refs获取上传组件的fileList属性，该属性包含了所有已上传的图片文件。
遍历文件列表 ：遍历fileList属性，并为每个图片文件创建一个新的URL对象。
更新image标签的src属性 ：将新创建的URL对象设置给image标签的src属性。

通过这种方法，浏览器就不会重新加载图片，从而避免了闪动问题。

代码示例

以下是一个使用Element UI上传多张图片的代码示例：

<template>
  <el-upload
    ref="upload"
    :action="uploadUrl"
    :multiple="true"
    @change="handleUpload"
  >
    <i class="el-icon-upload"></i>
    <span>上传图片</span>
  </el-upload>
  <div class="image-list">
    <img v-for="image in images" :src="image.url" alt="">
    <i class="el-icon-close" @click="handleDelete(image)"></i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/upload',
      images: [],
    }
  },
  methods: {
    handleUpload(fileList) {
      fileList.forEach(file => {
        const reader = new FileReader()
        reader.onload = () => {
          const image = {
            url: reader.result,
          }
          this.images.push(image)
        }
        reader.readAsDataURL(file)
      })
    },
    handleDelete(image) {
      this.images = this.images.filter(item => item !== image)
    },
  },
}
</script>