Как вывести изображения перед отправкой?

Question

столкнулся с проблемой что нужно прикреплять файлы к сообщению и перед отправкой видеть превью. Вроде сделал как надо, но выводится только одна картинка, подскажите что делать?

    <div class="preview">
      <div v-for="(file, key) in files" class="preview-image" :key="key">
        <div class="preview-remove" v-on:click="removeFile( key )">x</div>
        <img v-if="image" :src="image" />
        <div class="preview-info">
          <span>{{file.name}}</span>
          {{bytesToSize(file.size)}}
        </div>
      </div>
    </div>
    <input type="file" accept="image/jpeg,image/png" id="files" ref="files" v-on:change="handleFilesUpload" multiple/>


    handleFilesUpload:(e) ->
    # добавление файла
      uploadedFiles = @$refs.files.files
      i = 0
      while i < uploadedFiles.length
        @files.push uploadedFiles[i]
        srcFile = e.target.files
        @image = URL.createObjectURL(srcFile[0])
        i++

Вот как выводится, хотя файлы разные

Answer 1

  <div class="preview">
  <div v-for="(file, key) in files" class="preview-image" :key="key">
    <div class="preview-remove" v-on:click="removeFile( key )">x</div>
    <!-- <img src="./img/file_add.png" id="img1"/> -->
    <img :src="images[key]" />
    <div class="preview-info">
      <span>{{file.name}}</span>
      {{bytesToSize(file.size)}}
    </div>
  </div>
</div>  
handleFilesUpload:(e) ->
  uploadedFiles = @$refs.files.files
  i = 0
  while i < uploadedFiles.length
    @files.push uploadedFiles[i]
    @images.push URL.createObjectURL(uploadedFiles[i])
    i++

Разобрался сам

БЛОГ НА HUSL

Как вывести изображения перед отправкой?

Ответы (1 шт):