Отправка фотографии с сайта на сервер. Как реализовать?

Question

[black_eagle_01]

Привет, пытаюсь реализовать следующее:
1) Юзер загружает фото на сайт
2) Фото отправляется мне на сервер
3) Я сохраняю фото для дальнейшего использования

Как такое вообще можно реализовать? В инете куча статей, но все не работает...
Сервер на node.js.

Люди, которые пишут, что-то по типу: кинуть картинку в пост запрос, поймать на сервере, сохранить. Идите, пожалуйста, на***

Заранее спасибо =)

Comments

[ThunderCat]

1) Где код который "не работает"? там 3 строчки хтмл - форма и инпут, и 10 строчек на ноде, хочется их увидеть.

Answer 1

[Yuriy Vorobyov]

Воспользуйтесь этой библиотекой на стороне сервера, это самый простой и действенный вариант.
По итогу будет что-то такое:

const multer = require('multer');

const store = multer.diskStorage({
  destination(req, file, cb) {
    cb(null, './src/public/images'); // ваша папка для файлов на сервере
  },
  filename(req, file, cb) {
    cb(null, Date.now() + '_' + file.originalname);
  },
});

const upload = multer({ storage: store }).single('file'); // загрузка одного файла
const uploadMany = multer({ storage: store }).array('files'); // загрузка массива файлов

router.put('/test', upload, (req, res, next) => {
 req.body.file // файл 
});
router.put('/test', uploadMany, (req, res, next) => {
 req.body.files // массив файлов
});

На клиенте воспользуйтесь form-data:

const formdata = new FormData();
formdata.append("file", fileInput.files[0], "/C:/file-path/file.png"); // если файл один 

formdata.append("files", fileInput.files[0], "C:/file-path/file.png"); // если файлов много
formdata.append("files", fileInput.files[0], "C:/file-path/file.png"); // если файлов много

const requestOptions = {
  method: 'POST',
  body: formdata,
  redirect: 'follow'
};

fetch("url/test", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Comments

[black_eagle_01]

Спсибо за ответ. Все доступно и понятно

Answer 2

[WapSter]

async upload(e) {
                e.preventDefault()
                const formData = new FormData()
                formData.append('performer', this.performer)
                formData.append('album', this.album)
                for (let file of this.audio) {
                    formData.append('audio', file)
                }
                formData.append('preview', this.preview[0]);
                try {
                    const res = await fetch(`${keys.BASE_URL}/music/add`,
                        {
                            method: 'POST',
                            body: formData
                        }
                    );
                    const result = await res.json()
                    this.success = result.success
                    this.id = result.id
                } catch (e) {
                }
            }

Ну вот тебе кусок кода разбирайся, правда он для vue, но все довольно понятно. На node нужен плагин multer.

Comments

[black_eagle_01]

Спасибо =)