Комментарии 33
В web приложениях React занимает достойно положение, с этим надо смирится
Эммм… а что значит jQuery? Его как бы нет в посте )). Не понимаю в чем проблема, если какая та часть в посте вам не понятна, то я могу по крайней мере постараться вам объяснить
У вас сейчас аналогичная ситуация. «Обработка изображений ReactJS — NodeJS».
Расскажите мне пожалуйста, как React относится к обработке изображений?
Вы подключаете огромный шаблонизатор чтобы отобразить input-file на странице?
Вам хватит обычного fetch и… да и все в общем-то :) Кода будет в половину меньше и никаких зависимостей.
UPD: Я понимаю, что вы его используете потому что «это удобно и вообще че пристали». Просто когда новичек такое видит, он реально начнет на каждый пустяк пихать Реакт. И будет как с jQuery.
React не nodejs, там нет шаблонизатора. Есть формат jsx — функция js по созданию react элемента.
Во первых jQuery — это не React. Это разные вещи. Почему react? Банально, на нем просто пишут все и я в том числе )). Я в принципе тяжело уже представляю фронт без норм фрэймворков и на автоматизме юзаю reactjs, хотя вы правы — это действительно можно было написать и на простом js и реализация не совсем отличалась бы от текущего вида, но зато мы имеем готовый модуль реакт хуки — это сэкономит время для реакт разработчиков
var input = document.querySelector('input[type="file"]')
var data = new FormData()
data.append('file', input.files[0])
fetch('/avatars', {
method: 'POST',
body: data
})Тут можно винилу заменить на React, но зато на backend не нужно гемороиться, а заюзать готовые пакеты, типо express-fileupload
Во первых, задача стояла не использовать сторонние либы для бэка )).
Во вторых, вы пробовали сами отправить files[0] в formData без представления его байтов?
да и на сколько помню именно так он в formData отправляется
developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
Очень сомневаюсь, что пример указанный вами работает )). Кинь ссылку на песочницу, гляну твой результат. Reactjs — как бы и есть js es6+. Обработка указана и на клиенте и на сервере )). Будьте повнимательнее, а ваш пример нерабочий ))
Добавьте в заголовок "Часть 1: Загрузка на сервер" и это решит большинство упоминаемых в комментариях проблем :)
Вообще это странное решение. В сторону велосипеда.
Оптимально это Nginx или аналог который уже умеет оптимально отдавать изображения.
Вам в БД нужна только ссылка или что-то на основании чего можно сгенерировать ссылку.
Так же загрузка реализуется через Nginx, который затем вам отправляет путь по которому сохранено изображение.
чистый js. серверная часть — любая способная принять XMLHttpRequest.
вот буквально по этому совету habr.com/ru/post/491548/#comment_21368528
Можно и так:
const url = '/upload-path';
const file = input.files[0];
const xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', file.type);
// обрабатываем xhr.onload, xhr.onerror
xhr.send(file);Или через fetch:
fetch(url, {
method: 'POST',
headers: {
'Content-Type': file.type
},
body: file
})Дополню свой комментарий. Поскольку передаются сырые данные прямо в теле, то для Node.js достаточно (нужно, конечно, еще добавить обработку ошибок и исключений, например, обрыв соединения) выполнить pipe для потоков запроса и файла:
req.pipe(writeFileStream);А зачем? В моем примере с фронта и так отправляются сырые данные, причем потоково. Вы же сначала грузите весь файл в память (а что если он весит 10 Гб?), а потом отправляете. На стороне Node.js опять же обрабатываете максимально неэффективно — сохраняете целым куском (stream.write(Buffer.from(req.body), 'utf-8')) и преимущества потоков не используются.
Разбивка на байты могла бы пригодиться для реализации возможности докачки, но есть же file.slice.
Обработка изображений ReactJS — NodeJS