VueJs与FileReader：上传文件后图片未更新问题

我之前也碰到过完全一样的情况！首次上传图片显示正常，但后续上传（尤其是选同一张文件名的图）时，页面上的图片纹丝不动。主要是两个常见原因，咱们逐个解决：

1. 重置input的value，确保change事件能触发 #

浏览器默认会记住input file的选中值，如果第二次选的文件名和之前一样，change事件根本不会触发，自然不会更新imgSrc。所以每次处理完图片后，要把input的value清空：

<template>
  <input type="file" @change="handleFileChange" ref="fileInput" accept="image/*">
  <img :src="imgSrc" alt="预览图">
</template>

<script>
export default {
  data() {
    return {
      imgSrc: ''
    }
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0]
      if (!file) return
      
      // 生成预览地址
      this.imgSrc = URL.createObjectURL(file)
      
      // 关键：重置input的value，确保下次选同文件也能触发change
      this.$refs.fileInput.value = ''
    }
  },
  beforeUnmount() {
    // 记得释放blob URL，避免内存泄漏
    if (this.imgSrc) {
      URL.revokeObjectURL(this.imgSrc)
    }
  }
}
</script>

2. 强制浏览器刷新图片（针对缓存问题） #

如果是不同文件但内容更新了，却被浏览器缓存了旧的图片地址，可以在URL后面加个唯一随机参数（比如时间戳），让浏览器认为是新资源：

// 替换生成imgSrc的代码
this.imgSrc = `${URL.createObjectURL(file)}?t=${Date.now()}`

这样每次生成的地址都带唯一标识，浏览器就不会读取缓存的旧图了。

额外注意：释放Blob URL #

用URL.createObjectURL生成的地址会占用浏览器内存，组件销毁时一定要调用URL.revokeObjectURL释放，不然会有内存泄漏风险，上面的代码已经包含了这个处理逻辑。

内容的提问来源于stack exchange，提问作者Viktor