Vue js：將文件發布到 api

Question

我在 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>

Answer 1

您可以嘗試訂閱change事件以獲取選定的文件：

<input class="input-file__input" ref="file" type="file" @change="changeFile">

changeFile(event) {
  const file = event.target.files[0]
}

Answer 2

假設您有一個帶有“上傳”ID 的輸入，那么：

 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">