Как загрузить файл в Vue.js

В этом руководстве вы узнаете, как обрабатывать и загружать файл в Vue.js, используя поле ввода формы.

Давайте создадим поле формы, которое будет принимать файлы изображений и отправлять POST-запрос на внутренний сервер.

HTML

<button class="btn btn-info" @click="onPickFile">Upload profile picture</button>
<input
  type="file"
  style="display: none"
  ref="fileInput"
  accept="image/*"
  @change="onFilePicked"/>

Мы замаскировали наше поле ввода, чтобы сделать кнопку загрузки настраиваемой. В полях ввода файла обычно используется стиль браузера по умолчанию, который нелегко настроить.

Как видите, должно быть два метода: onPickFile () и onFilePicked (), давайте создадим их.

Vue.js

onPickFile () {
  this.$refs.fileInput.click()
},
onFilePicked (event) {
  const files = event.target.files
  let filename = files[0].name
  const fileReader = new FileReader()
  fileReader.addEventListener('load', () => {
    this.imageUrl = fileReader.result
  })
  fileReader.readAsDataURL(files[0])
  this.image = files[0]
}

Теперь, когда вы нажимаете кнопку «Загрузить изображение профиля», он вызывает метод onFilePicked (), который программно запускает поле ввода файла.

Когда вы выбираете файл для загрузки, будет вызван метод onFilePicked (). Здесь вы можете проверить, превышен ли максимальный размер файла, формат файла и т. Д.

Если он проходит проверку, файл будет назначен изображению, поданному в объекте data ().

export default {
  data () {
    return {
      image: null
    }
  }
}

Затем вы можете написать метод, который отправит ваш файл на внутренний сервер, например База огня.

Если вы найдете этот пост полезным, дайте мне знать в комментариях ниже.
Ура,
Ренат Галямов

Хотите поделиться этим с друзьями?
👉 renatello.com/vue-js-file-upload

PS: Обязательно ознакомьтесь с другими учебниками по JavaScript, например Полезные фильтры Vue.js, как остановить распространение событий мыши в Vue.js и загрузить внешний файл CSS в компонент Vue.js.

Первоначально опубликовано на https://renatello.com ( Как загрузить файл в Vue.js ) 8 августа 2019 г.