Блог

Главная - Вопросы по программированию - Vue js: отправка файла в api

Vue js: отправка файла в api

#javascript #vue.js

#javascript #vue.js

Вопрос:

у меня есть приведенный ниже код в vue js, и я хотел поделиться файлом, как вы можете видеть, но моя проблема в том, что я хочу сохранить имя файла, которое я загрузил в API json в методе post, есть ли способ сделать это и заранее спасибо

   <div class="input-file">
    <input class="input-file__input" ref="file" type="file">
    <div class="input-file__button" @click="selectFile()"></div>
  </div>
  
  
  <script>
  selectFile(){
      let fileInputElement = this.$refs.file;
      fileInputElement.click(); //i want to send this file name to api post method
      // ...
    },
    </script>

Ответ №1:

Предположим, что у вас есть ввод с идентификатором ‘upload’, затем:

 log_file_name() {
  const path = document.getElementById('upload').value;
  if (path) {
    let startIndex = (path.indexOf('\') >= 0 ? path.lastIndexOf('\') : path.lastIndexOf('/'));
    let filename = path.substring(startIndex);
    if (filename.indexOf('\') === 0 || filename.indexOf('/') === 0) {
      filename = filename.substring(1);
    }
    console.log(filename);
  }
} 
 <input class="input-file__input" id="upload" @change="log_file_name()" ref="file" type="file">

Ответ №2:

Вы можете попробовать подписаться на change событие, чтобы получить выбранный файл:

 <input class="input-file__input" ref="file" type="file" @change="changeFile">
 
 changeFile(event) {
  const file = event.target.files[0]
}

Комментарии:

1. извините, если мой вопрос кажется странным, но я новичок в vue, таким образом я могу получить имя файла, например, для загруженного файла index.html так что я получаю index.html в api json?

2. просто посмотрите file . Там должно быть что-то вроде name .