Для создания полосы прогресса при загрузке файла Axios на AWS S3 вам понадобится некоторая настройка как на стороне фронтенда на React, так и на стороне сервера на Node.js.
1. На стороне фронтенда на React:
Импортируйте библиотеку `axios` и настройте прогресс с помощью `axios.create()`, добавив интерцептор запроса и ответа.
```javascript
import React, { useState } from "react";
import axios from "axios";
const UploadFile = () => {
const [progress, setProgress] = useState(0);
const handleFileUpload = async (e) => {
const file = e.target.files[0];
const formData = new FormData();
formData.append("file", file);
const config = {
onUploadProgress: (progressEvent) => {
const progress = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
setProgress(progress);
},
};
try {
await axios.post("/upload", formData, config);
console.log("File uploaded successfully");
} catch (error) {
console.error(error);
}
};
return (
<div>
<input type="file" onChange={handleFileUpload} />
<progress value={progress} max="100" />
</div>
);
};
export default UploadFile;
```
2. На стороне сервера на Node.js:
Установите библиотеку `aws-sdk` и настройте S3 клиент с использованием ваших AWS учетных данных. Затем создайте маршрут для загрузки файла на сервер.
```javascript
const express = require("express");
const multer = require("multer");
const AWS = require("aws-sdk");
const app = express();
const upload = multer();
// .... Настройка AWS S3
app.post("/upload", upload.single("file"), (req, res) => {
const file = req.file;
const s3 = new AWS.S3();
const params = {
Bucket: "your-bucket-name",
Key: file.originalname,
Body: file.buffer,
};
const options = {
partSize: 10 * 1024 * 1024, // частичная загрузка файла
queueSize: 10, // количество параллельных запросов
};
const uploader = s3.upload(params, options);
uploader.on("httpUploadProgress", (progress) => {
console.log(progress.loaded, progress.total);
});
uploader.send((err, data) => {
if (err) {
console.error(err);
return res.status(500).json({ error: err.message });
}
res.sendStatus(200);
});
});
app.listen(5000, () => {
console.log("Server is listening on port 5000");
});
```
В коде выше вы должны заменить `"your-bucket-name"` на имя вашего S3 ведра. Будет создано новое ведро, если его не существует.
При загрузке файла прогресс будет отражаться на стороне клиента с помощью полосы прогресса. Прогресс также будет отображаться в консоли на сервере Node.js.