Как сохранить картинку на сервере, переданную пользователем на сервер node js сокетом?

Question

[Dazle_Prg]

Простая форма отправки изображения:

<form id="#formfraza" enctype="multipart/form-data">
            <input type="file" id="fileinput" accept="image/*"/>
            <div type="submit" id="submitfraza3">Добавить</div>
 </form>

Отправка сокета на сервер:

document.getElementById("submitfraza3").addEventListener('click', () => {

let fileinput = document.getElementById("fileinput");
let val1 = fileinput.value;

  socket.emit('newfilm', {val1: val1});

});

Что происходит на сервере: Получаю путь/имя и расширение файла переданной мной картинки

socket.on('newfilm', ({val1}) => {
console.log(val1); //C:\fakepath\555-no-bg-preview (carve.photos).png
});

Как мне сохранить эту картинку в папке на сервере?

Answer 1

[Пума Тайланд]

проблема не в multer, а в том что val1 - это не файл, а строка "C:\fakepath\...", сервером её не прочитать никак.

бери файл из fileinput.files[0] и гони его как ArrayBuffer:

const buf = await fileinput.files[0].arrayBuffer();
socket.emit('newfilm', {name: fileinput.files[0].name, buf});

на сервере: await fs.promises.writeFile(path, buf) (сокет уже отдаёт Buffer, оборачивать в Buffer.from не надо, а обычный fs.writeFile без коллбэка тут упадёт).

но по-хорошему сокет вообще не нужен, обычный POST с multipart/form-data + multer сделает то же самое в разы проще.

Answer 2

[Daemon23RUS]

В вашем текущем подходе вы получаете только значение val1, которое содержит путь к файлу на клиентской стороне. Для загрузки файла на сервер вам необходимо передать сам файл, а не только его путь. На
клиентской стороне Вам нужно использовать объект FormData для создания формы, которая будет содержать файл. Затем отправьте эту форму через WebSocket.

const formData = new FormData();
formData.append('file', file);
 socket.emit('newfilm', formData);

Ну и принять, что то вроде этого с multer для обработки загружаемых файлов. (const upload = multer({ storage: storage });)

socket.on('newfilm', (formData) => {
        upload.single('file')(req, res, (err) => {
            if (err) {
                console.error('Ошибка при загрузке файла:', err);
                return;
            }
            console.log('Файл успешно загружен:', req.file);
        });
    });