Svelte中通过引用更新图片数组失败，请求技术帮助

你的代码存在两个核心问题，导致数组始终无法更新：

1. 异步时机错误 #

FileReader的load事件是异步触发的，你在调用reader.readAsDataURL(file)之前就执行了images = [image, ...images]，此时image还未被赋值（仍是undefined），且回调中对image的赋值不会回溯影响这行代码的结果。必须把数组更新逻辑放在load回调内部，确保拿到正确的图片数据。

2. 数组引用传递误区 #

JS中数组是引用类型，但你在函数内直接给参数images重新赋值，相当于让这个局部变量指向了新数组，并不会修改原来的_1_3_1_imgs引用。正确做法是直接修改原数组内容，或操作外部数组变量。

修复后的代码（直接操作原数组，简洁直观） #

<script>
  let _1_3_1_imgs = [];
  let input;

  function addImg() {  
    const file = input.files[0]; 

    if (file) {
      const reader = new FileReader();
      reader.addEventListener("load", function () {
        // 在异步回调内更新原数组，Svelte能检测到响应式变化
        _1_3_1_imgs = [reader.result, ..._1_3_1_imgs];
      });
      reader.readAsDataURL(file);
    }
  }
</script>

<input bind:this={input} on:change={addImg} type="file"/>                
{#each _1_3_1_imgs as _1_3_1_img, index}
  <div>
    <img src={_1_3_1_img} alt="Preview"/>         
  </div>
{/each}

若需动态传递数组引用的修复方案 #

如果要保留动态传参的设计，可以通过修改原数组内容或返回新数组实现：

<script>
  let _1_3_1_imgs = [];
  let input;

  function addImg(images) {  
    const file = input.files[0]; 

    if (file) {
      const reader = new FileReader();
      reader.addEventListener("load", function () {
        // 直接修改原数组内容，Svelte可检测到变化
        images.unshift(reader.result);
        
        // 或纯函数风格：返回新数组，外部接收更新
        // return [reader.result, ...images];
      });
      reader.readAsDataURL(file);
    }
  }
</script>

<input bind:this={input} on:change={() => {
  // 若用返回新数组的方式，需在这里更新原变量
  // const newImgs = addImg(_1_3_1_imgs);
  // if (newImgs) _1_3_1_imgs = newImgs;
  
  addImg(_1_3_1_imgs);
}} type="file"/>                
{#each _1_3_1_imgs as _1_3_1_img, index}
  <div>
    <img src={_1_3_1_img} alt="Preview"/>         
  </div>
{/each}

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