Как отобразить имя файла для пользовательского ввода в Vue?

Question

У меня есть стиль ввода файла. Работает нормально, но после выбора файла я бы хотел показать выбранное имя файла вместо No files selected. Как я могу сделать это в Vue?

.fileContainer {
  overflow: hidden;
  position: relative;
  background-color: #8181fe;
  color: #fff;
  padding: 6px 18px;
  border-radius: 7px;
  line-height: 21px;
}

form input, textarea {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #d9dadc;
  border-radius: 7px;
  font-size: 16px;
  color: #393645;
  resize: none;
}

.fileContainer [type=file] {
  cursor: pointer;
  display: block;
  font-size: 13px;
  filter: alpha(opacity=0);
  min-height: 100%;
  min-width: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  text-align: right;
  top: -8px;
} 

.file-info {
  font-size: 13px;
  color: #a9a7a9;
  line-height: 53px;
  padding-left: 10px;
}

<div id="contact-form" class="contact-form">
  <form class="form">
    <div class="section-file">
      <label class="fileContainer">
        Select files
        <input type="file" class="file-upload" id="file" name="file" accept="jpg/image/jpeg/image/png">
      </label>

      <span class="file-info">No files selected</span>
    </div>
  </form>
</div>

Answer 1

Обратите внимание, что change событие является ассоциированным <input>, а выбранные файлы указываются в <input>.files, который имеет свойство length дляколичество файлов.Затем мы можем отслеживать ненулевую длину как логическое значение, чтобы определить, отображать ли No files selected:

1. Добавить свойство данных files для отслеживания выбранных файлов :

data() {
  return {
    files: null
  }
},

Используйте v-if для условного рендеринга No files selected на основе files выше.В ветке v-else отображается список выбранных файлов:

<span v-if="!files || !files.length">No files selected</span>
<ul v-else>
  <li v-for="file in files" :key="file.name">{{file.name}}</li>
</ul>

Добавить обработчик событий change - к <input> в шаблоне компонента:

<input @change="filesSelected">

Определите метод обработчика в компоненте methods:

methods: {
  fileSelected(e) {
    this.files = e.target.files
  }
}

new Vue({
  el: '#contact-form',
  data() {
    return {
      files: null
    }
  },
  methods: {
    fileSelected(e) {
      this.files = e.target.files
    }
  }
})

.fileContainer {
  overflow: hidden;
  position: relative;
  background-color: #8181fe;
  color: #fff;
  padding: 6px 18px;
  border-radius: 7px;
  line-height: 21px;
}

form input, textarea {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #d9dadc;
  border-radius: 7px;
  font-size: 16px;
  color: #393645;
  resize: none;
}

.fileContainer [type=file] {
  cursor: pointer;
  display: block;
  font-size: 13px;
  filter: alpha(opacity=0);
  min-height: 100%;
  min-width: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  text-align: right;
  top: -8px;
} 

.file-info {
  font-size: 13px;
  color: #a9a7a9;
  line-height: 53px;
  padding-left: 10px;
}

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>

<div id="contact-form" class="contact-form">
  <form class="form">
    <div class="section-file">

      <label class="fileContainer">
        Select files
        <input type="file" class="file-upload" id="file" name="file" @change="fileSelected" multiple accept="image/jpg,image/jpeg,/image/png">
      </label>

      <span class="file-info" v-if="!files || !files.length">No files selected</span>
      <ul v-else>
        <li v-for="file in files" :key="file.name">{{file.name}}</li>
      </ul>
    </div>

  </form>
</div>