Upload

Компонент Upload предназначен для загрузки файлов на сервер и предоставляет богатый функционал для управления файлами, включая множественный выбор, предпросмотр, ограничение форматов и размеров, а также асинхронные события. Он интегрируется с Vue 3 и полностью поддерживает реактивность.

Основная структура компонента

<template>
  <el-upload
    action="https://example.com/upload"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    multiple
    list-type="picture-card"
  >
    <el-button size="small" type="primary">Загрузить файл</el-button>
  </el-upload>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const fileList = ref([])

    const handlePreview = file => {
      console.log('Предпросмотр файла:', file)
    }

    const handleRemove = (file, fileList) => {
      console.log('Удалён файл:', file, fileList)
    }

    return {
      fileList,
      handlePreview,
      handleRemove
    }
  }
}
</script>

Ключевые атрибуты:

  • action – URL, на который отправляется файл.
  • file-list – реактивный массив объектов загруженных файлов.
  • multiple – разрешает множественный выбор файлов.
  • list-type – тип отображения: text, picture, picture-card.
  • on-preview, on-remove, on-success, on-error – события компонента.

Настройка ограничений на файлы

Для контроля загружаемых файлов можно использовать следующие свойства:

  • accept – список MIME-типов или расширений файлов.
  • limit – максимальное количество файлов для загрузки.
  • before-upload – функция, вызываемая перед загрузкой файла для валидации.

Пример:

<el-upload
  action="https://example.com/upload"
  :before-upload="beforeUpload"
  accept=".jpg,.png"
  :limit="3"
>
  <el-button type="primary">Загрузить изображение</el-button>
</el-upload>

<script>
const beforeUpload = (file) => {
  const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPGorPNG) {
    ElMessage.error('Можно загружать только JPG/PNG файлы!')
  }
  if (!isLt2M) {
    ElMessage.error('Размер файла не должен превышать 2 МБ!')
  }

  return isJPGorPNG && isLt2M
}
</script>

События компонента Upload

  1. on-success – вызывается после успешной загрузки файла:
const handleSuccess = (response, file, fileList) => {
  console.log('Файл успешно загружен:', file, response)
}
  1. on-error – при ошибке загрузки:
const handleError = (err, file, fileList) => {
  console.error('Ошибка при загрузке файла:', file, err)
}
  1. on-change – любое изменение состояния файла (добавление, удаление, завершение загрузки):
const handleChange = (file, fileList) => {
  console.log('Состояние файла изменилось:', file, fileList)
}
  1. on-preview – открытие предпросмотра файла.
  2. on-remove – удаление файла из списка.

Режимы отображения файлов

  • text – стандартный список с именами файлов.
  • picture – список с миниатюрами изображений.
  • picture-card – карточки для изображений, удобны для интерфейсов галерей.

Пример с картинками:

<el-upload
  action="https://example.com/upload"
  list-type="picture-card"
  :file-list="fileList"
>
  <i class="el-icon-plus"></i>
</el-upload>

Асинхронная обработка

Можно полностью контролировать процесс загрузки через http-request:

<el-upload
  :http-request="customUpload"
  :file-list="fileList"
>
  <el-button type="primary">Загрузить</el-button>
</el-upload>

<script>
const customUpload = (option) => {
  const formData = new FormData()
  formData.append('file', option.file)

  fetch('https://example.com/upload', {
    method: 'POST',
    body: formData
  })
    .then(res => res.json())
    .then(data => option.onSuccess(data))
    .catch(err => option.onError(err))
}
</script>

Поддержка drag-and-drop

Для более удобной загрузки файлов можно использовать режим перетаскивания:

<el-upload
  action="https://example.com/upload"
  drag
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">Перетащите файл сюда или кликните для выбора</div>
</el-upload>

Совместное использование с формами

Компонент Upload легко интегрируется с el-form, позволяя включить проверку перед отправкой формы:

<el-form :model="form" ref="formRef">
  <el-form-item label="Файл" prop="file">
    <el-upload
      action="https://example.com/upload"
      v-model:file-list="form.file"
    >
      <el-button>Выбрать файл</el-button>
    </el-upload>
  </el-form-item>
</el-form>

Хранение и реактивность файла

Каждый элемент file-list имеет структуру:

{
  name: 'example.png',
  url: 'https://example.com/file/example.png',
  status: 'success', // uploading, done, error
  percentage: 0 // прогресс загрузки
}

Эта структура позволяет полностью отслеживать состояние каждого файла и управлять списком программно.

Компонент Upload в Element Plus обеспечивает гибкость и полный контроль над загрузкой файлов, поддерживая асинхронные операции, предпросмотр, валидацию и drag-and-drop, что делает его незаменимым для создания современных веб-интерфейсов с файлами.

Оглавление