Vue 在使用文件@change 时将图像保存在错误的组件上

Question

我有一个图像组件，例如滑块，用户可以在其中将额外的图像附加到滑块的末尾。但是，如果页面上有多个相同的滑块组件，它总是将图像添加到第一个组件。

演示：https://codesandbox.io/s/laughing-sid-71ox2?file=/src/components/ImageBlock.vue

顺便说一句。我有其他组件不使用按预期工作的文件读取器 API。同样的方法。

Answer 1

您的 extra_image 的 ID 重复了。因此，每次点击标签 + 都会触发第一个隐藏文件输入。

要解决此问题，您只需根据 block_index:

提供不同的 ID

    <input
      :id="`extra_image_${block_index}`"
      class="hidden"
      name="extra_image"
      type="file"
      accept="image/*"
      @change="add_extra_image($event)"
    >
    <label :for="`extra_image_${block_index}`" class="extra_image">
      <span class="icon">+</span>
    </label>

Vue 在使用文件@change 时将图像保存在错误的组件上

Vue saves image on wrong component when file @change is used

javascript

filereader

vue.js

vuejs2