Базовая загрузка файла: ```vue ``` Composable для переиспользования: ```javascript // composables/useFileUpload.js import { ref, computed } from 'vue' import axios from 'axios' export function useFileUpload(url, options = {}) { const { maxSize = 10 * 1024 * 1024, allowedTypes = [], multiple = false } = options const files = ref([]) const progress = ref(0) const isUploading = ref(false) const error = ref('') const abortController = ref(null) const previews = computed(() => files.value .filter(f => f.type.startsWith('image/')) .map(f => ({ name: f.name, url: URL.createObjectURL(f) })) ) function validate(fileList) { for (const file of fileList) { if (file.size > maxSize) { return `${file.name}: превышен лимит ${Math.round(maxSize / 1024 / 1024)} МБ` } if (allowedTypes.length && !allowedTypes.includes(file.type)) { return `${file.name}: недопустимый тип файла` } } return '' } function addFiles(fileList) { const validationError = validate(fileList) if (validationError) { error.value = validationError return false } error.value = '' if (multiple) { files.value.push(...fileList) } else { files.value = [fileList[0]] } return true } function removeFile(index) { files.value.splice(index, 1) } function cancel() { abortController.value?.abort() isUploading.value = false progress.value = 0 } async function upload(extraData = {}) { if (!files.value.length) return null const formData = new FormData() files.value.forEach(file => formData.append('files', file)) Object.entries(extraData).forEach(([key, val]) => formData.append(key, val) ) isUploading.value = true progress.value = 0 abortController.value = new AbortController() try { const { data } = await axios.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' }, signal: abortController.value.signal, onUploadProgress(event) { progress.value = Math.round( (event.loaded / event.total) * 100 ) } }) files.value = [] return data } catch (err) { if (axios.isCancel(err)) { error.value = 'Загрузка отменена' } else { error.value = err.response?.data?.message || 'Ошибка загрузки' } return null } finally { isUploading.value = false } } return { files, previews, progress, isUploading, error, addFiles, removeFile, upload, cancel } } ``` Drag-and-drop зона: ```vue ``` Загрузка чанками (для больших файлов): ```javascript // composables/useChunkedUpload.js import { ref } from 'vue' import axios from 'axios' export function useChunkedUpload(url, chunkSize = 1024 * 1024) { const progress = ref(0) const isUploading = ref(false) let aborted = false async function upload(file) { isUploading.value = true aborted = false const totalChunks = Math.ceil(file.size / chunkSize) const uploadId = crypto.randomUUID() for (let i = 0; i < totalChunks; i++) { if (aborted) break const start = i * chunkSize const end = Math.min(start + chunkSize, file.size) const chunk = file.slice(start, end) const formData = new FormData() formData.append('chunk', chunk) formData.append('uploadId', uploadId) formData.append('chunkIndex', String(i)) formData.append('totalChunks', String(totalChunks)) formData.append('fileName', file.name) await axios.post(url, formData) progress.value = Math.round(((i + 1) / totalChunks) * 100) } isUploading.value = false if (!aborted) { // Финализация на сервере return axios.post(`${url}/complete`, { uploadId, fileName: file.name }) } } function cancel() { aborted = true isUploading.value = false } return { progress, isUploading, upload, cancel } } ``` --- ## 📌 Реальные кейсы 🔹 **Аватар пользователя** -- один файл, мгновенный превью, кроп перед отправкой 🔹 **Галерея товаров** -- multiple, drag-and-drop, сортировка превью, чанковая загрузка для больших изображений 🔹 **Импорт CSV** -- валидация расширения, парсинг на клиенте перед отправкой, прогресс бар --- ## Частые ошибки ```javascript // ❌ Забыли Content-Type -- браузер не поставит boundary axios.post('/upload', formData, { headers: { 'Content-Type': 'application/json' } }) // ✅ Ставь multipart или не ставь вообще -- axios сам добавит axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) // Или вообще без headers -- axios определит по FormData // ❌ Нет валидации до отправки -- юзер ждёт загрузку, а сервер 400 async function upload(file) { const formData = new FormData() formData.append('file', file) await axios.post('/upload', formData) } // ✅ Валидируй тип и размер до отправки function upload(file) { if (file.size > MAX_SIZE) throw new Error('Слишком большой файл') if (!ALLOWED.includes(file.type)) throw new Error('Неверный тип') // ... } // ❌ Утечка памяти -- createObjectURL без revoke const url = URL.createObjectURL(file) // потом никогда не очищается // ✅ Очищай при удалении или при unmount import { onUnmounted } from 'vue' const urls = [] function createPreview(file) { const url = URL.createObjectURL(file) urls.push(url) return url } onUnmounted(() => urls.forEach(u => URL.revokeObjectURL(u))) ``` --- ## Резюме | Элемент | Инструмент | |---|---| | Выбор файла | `` + `.files` | | Отправка | `FormData` + `axios.post` | | Прогресс | `onUploadProgress` | | Drag-and-drop | `dragover.prevent` + `drop.prevent` | | Превью | `URL.createObjectURL` (не забудь `revokeObjectURL`) | | Большие файлы | Чанковая загрузка | | Отмена | `AbortController` | ---

Как обрабатывать загрузку файлов в Vue?