Загрузка файлов — обычное требование в веб-приложениях, и иногда вам может потребоваться загрузить несколько файлов по одному и тому же маршруту. В этой статье блога мы рассмотрим несколько методов достижения этой функциональности с использованием разговорного языка и попутно предоставим примеры кода. Итак, давайте углубимся и узнаем, как загрузить два файла по одному и тому же маршруту!

Метод 1: традиционная HTML-форма.
Один из самых простых способов загрузки файлов — использование традиционной HTML-формы. Вы можете создать HTML-форму с соответствующими входными данными для выбора файла и использовать тип кодировки «multipart/form-data». Вот пример:

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file1">
  <input type="file" name="file2">
  <button type="submit">Upload</button>
</form>

Метод 2: JavaScript FormData API:
Если вы предпочитаете более динамичный подход, вы можете использовать JavaScript и FormData API для асинхронной загрузки файлов. Этот метод позволяет обрабатывать загрузку файлов без обновления страницы. Вот пример использования Fetch API:

const file1 = document.querySelector('input[name="file1"]').files[0];
const file2 = document.querySelector('input[name="file2"]').files[0];
const formData = new FormData();
formData.append('file1', file1);
formData.append('file2', file2);
fetch('/upload', {
  method: 'POST',
  body: formData
})
  .then(response => {
    // Handle response here
  })
  .catch(error => {
    // Handle error here
  });

Метод 3. Использование серверной платформы.
Если вы работаете с серверной платформой, такой как Node.js, с Express или Django, вы можете использовать их встроенные возможности загрузки файлов. Эти платформы предоставляют промежуточное программное обеспечение и утилиты для легкой обработки загрузки файлов. Вот пример использования Express:

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();
app.post('/upload', upload.array('files', 2), (req, res) => {
  // Access uploaded files via req.files
  // Handle file processing here
});
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

Метод 4. Использование служб облачного хранения.
Если вы имеете дело с большими файлами или вам нужно масштабируемое решение, вы можете рассмотреть возможность использования служб облачного хранения, таких как Amazon S3 или Google Cloud Storage. Эти службы предоставляют надежные API для загрузки файлов и управления ими. Вот пример использования AWS SDK для Node.js:

const AWS = require('aws-sdk');
const s3 = new AWS.S3();
const file1Params = {
  Bucket: 'my-bucket',
  Key: 'file1.jpg',
  Body: file1,
};
const file2Params = {
  Bucket: 'my-bucket',
  Key: 'file2.jpg',
  Body: file2,
};
s3.upload(file1Params, (err, data) => {
  // Handle upload completion or error
});
s3.upload(file2Params, (err, data) => {
  // Handle upload completion or error
});

Метод 5: несколько вызовов API.
Если вы ограничены размером файла сервера или другими ограничениями, вы можете разделить загрузку файлов на отдельные вызовы API. Вы можете загрузить первый файл, получить ответ или обратный вызов об успешном выполнении, а затем приступить к загрузке второго файла. Вот пример использования Fetch API:

fetch('/upload', {
  method: 'POST',
  body: file1
})
  .then(response => {
    // Handle success
    return fetch('/upload', {
      method: 'POST',
      body: file2
    });
  })
  .then(response => {
    // Handle second file success
  })
  .catch(error => {
    // Handle error
  });

Метод 6: Параллельная загрузка.
Если вы хотите загрузить оба файла одновременно, вы можете использовать методы параллельной загрузки. Для этого вы можете использовать такие библиотеки, как Axios или синтаксис async/await. Вот пример использования Axios:

const axios = require('axios');
const uploadFile = async (file) => {
  try {
    const response = await axios.post('/upload', file);
    // Handle response or success
  } catch (error) {
    // Handle error
  }
};
Promise.all([uploadFile(file1), uploadFile(file2)])
  .then(() => {
    // Both files uploaded successfully
  })
  .catch((error) => {
    // Handle error
  });

Метод 7: Загрузка через WebSocket.
Если вам нужны обновления в режиме реального времени во время процесса загрузки файла, вы можете рассмотреть возможность использования технологии WebSocket. WebSocket обеспечивает двустороннюю связь между клиентом и сервером. Вы можете отправлять фрагменты файлов через соединение WebSocket и обновлять ход выполнения на стороне клиента. Вот упрощенный пример:

// Client-side code
const socket = new WebSocket('ws://localhost:3000/upload');
socket.onopen = () => {
  const file1Reader = new FileReader();
  const file2Reader = new FileReader();
  file1Reader.onload = () => {
    socket.send(file1Reader.result);
  };
  file2Reader.onload = () => {
    socket.send(file2Reader.result);
  };
  file1Reader.readAsArrayBuffer(file1);
  file2Reader.readAsArrayBuffer(file2);
};
socket.onmessage = (event) => {
  // Handle server responses or progress updates
};
// Server-side code (using Node.js and ws package)
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    // Handle file chunks or progress updates
  });
});

В этой статье мы рассмотрели семь различных способов загрузки двух файлов по одному и тому же маршруту в ваше веб-приложение. Вы можете выбрать метод, который лучше всего соответствует вашим требованиям и техническому стеку. Независимо от того, используете ли вы традиционные HTML-формы, JavaScript FormData, серверные платформы, службы облачного хранения, несколько вызовов API, параллельную загрузку или технологию WebSocket, теперь у вас есть множество вариантов выполнения этой задачи. Приятного кодирования!