如何预览在 Svelte 中单击图标（例如：附件图标）上传的图像？

Question

用户单击附件图标（输入类型标签将被隐藏）
用户选择了一张图片
图像标签上的选定图像预览

在 Svelte 中实现此目标的最佳方法是什么？

Answer 1

这与没有苗条的做法并没有什么不同。您从所选文件创建数据 URL 并将其设置为图像源。

<script>
  let src = '';

  function onChange(event) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        src = e.target.result;
      }
      reader.readAsDataURL(event.target.files[0]);
    }
  }
</script>

<input type="file" on:change={onChange} />
{#if src}
  <img {src} />
{/if}

Answer 2

隐藏输入。
当点击上传图标时触发点击输入 on:click={()=>{fileinput.click();}}

请检查此回复https://svelte.dev/repl/b17c13d4f1bb40799ccf09e0841ddd90?version=3.29.0

    <script>
    let  avatar, fileinput;
    const onFileSelected =(event)=>{
            let image = event.target.files[0];
            let reader = new FileReader();
            reader.readAsDataURL(image);
            reader.onload = e => {
                 avatar = e.target.result
            };
          }
    
    </script>
 <div id="app">
 <h1>Upload Image</h1>
  
        {#if avatar}
        <img class="avatar" src="{avatar}" alt="d" />
        {:else}
        <img class="avatar" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-alt-512.png" alt="" /> 
        {/if}
 
<img class="upload" src="https://static.thenounproject.com/png/625182-200.png" alt="" on:click={()=>{fileinput.click();}} />
<div class="chan" on:click={()=>{fileinput.click();}}>Change Avatar</div>
<input style="display:none" type="file" accept=".jpg, .jpeg, .png" on:change={(e)=>onFileSelected(e)} bind:this={fileinput} >

</div>

如何预览在 Svelte 中单击图标（例如：附件图标）上传的图像？

How to preview an image uploaded on click of an icon (eg: attachment icon) in Svelte?

svelte