Есть поле:
....
<div class="custom-file">
<input type="file" class="custom-file-input" id="avatar" name="avatar" @change="showUploadedAvatar">
<label class="custom-file-label" for="avatar">Выберите файл</label>
</div>
....
Метод в компоненте vue:
showUploadedAvatar(event) {
var ext = $(event.target).val().match(/\.(.+)$/)[1];
if (ext == 'jpg' ||ext == 'jpeg'||ext == 'png') {
this.newAvatar = URL.createObjectURL(event.target.files[0]);
} else {
alert('Некорректный тип файла');
}
}
При загрузке файла, если он подходит в
this.newAvatar добавляется ссылка, сам переменная находится в:
data: function(){
return {
user: null,
percents: [5,10,25,50,75,100],
categories: [],
newAvatar: null,
}
}
и используется для показа загруженного аватара.
Теперь к вопрос. Я хочу чтобы при загрузке файла у меня так же показывалось его название вместо текста "Выберите файл". Каким самым правильным способом можно это сделать?
Создавать еще один элемент в data()? Лепить jquery? Возможно есть какие-то best practise?
Средний
