Как организовать загрузку изображений, предпросмотр, отправку и сохранение на сервере в vue.js и node.js?

Question

[NiceScript]

Использую element-io
Задача такая:
При загрузке новых изображений, нужно сделать квадратную миниатюру, чтобы человек сам её указал, затем, когда все картинки имеют ещё и миниатюры, отправить их на сервер, сохранить в папке, записать ссылки в бд.

Что сейчас есть:

1. 
   Есть el-upload (инпут с типом файл), при его изменении отрабатывается событие 'handleChangeIMG', где все файлы преобразуются в DOMString(объект содержащий ссылку), по которой можно посмотреть загруженные картинки.
   
   код 1

   
   Инпут
   

   <el-upload
                   id="elImageAddNew"
                   drag
                   action=""
                   :auto-upload="false"
                   :on-success="ElImageSuccess"
                   :before-upload="beforeElImageUpload"
                   :show-file-list="false"
                   :on-change="handleChangeIMG"
                   multiple
                   :file-list="ElImageForm.preImagesArray"
                   class="dialog-add-image-content">
                   <i class="el-icon-upload"></i>
                   <div class="el-upload__text">Перенесите файлы или  <em>нажмите для загрузки</em></div>
                   <p>JPG, GIF или PNG.</p>
               </el-upload>

   
   обработчик изменений в инпуте
   

   handleChangeIMG (file, fileList) {
           console.log('handleChange', file, fileList)
           this.ElImageForm.preImagesArray.push(URL.createObjectURL(file.raw))
         }

   
   
   
   
2. 
   Когда сделан первый этап, открывается модальное окно, в нём слайдер из массива картинок this.ElImageForm.preImagesArray, загруженных в 1 пункте. Здесь при помощи VueCropper выбираем миниатюру. В итоге у нас массив из объектов, в каждом объекте blob-ссылки на полную версию картинки и миниатюру.
   Его отправляю на сервер.
   
   код2

   
   Функция добавления выбранной миниатюры, и запись объекта в итоговый массив
   

   this.$refs.cropper[0].getCropBlob(data => {
   // делаем изображения из зоны выбора миниатюры
               let imgMini = window.URL.createObjectURL(data)
   //создаём объект для добавления в итоговый массив
               let ob = {
                 img: that.ElImageForm.preImagesArray[index],
                 img_mini: imgMini
               }
   // Добавляем в итоговый массив
               that.ElImageForm.el_src.push(ob)
   // Если последняя миниатюра, то надо отправить на сервер
               if (!hasIndex) {
                 that.ElImageSendAddImages()
               }
             })

   
   Отправка происходит так
   Api().post('settings', params)
   params - это итоговый массив, и путь обработчика для node js
   
   
   
3. 
   Сервер идентифицирует запрос, понимаем что action === "UPDATE", что тип запроса 'image', как сохранить данные в бд, проблем нет.
   НЕ могу разобраться как сохранить картинки в папке какой-нибудь.
   
   код 3

   // feed - это переданный params
   if (feed.value_type === 'image') {
                       // save file
   
                       // save in db
                       if (Array.isArray(feed.new_value)) {
   			... тут всё отрабатывает нормально
   			}
                   }

   
   
   
   

Не знаю, может ошибка в том, что блоб файлы пытаюсь передать, вообщем гадать не буду. Надо файлы сохранить на сервере, а ссылки на них в бд.
Прошу помощи.

Answer 1

[Денис Базарнов]

Уточню вопрос (возможно в нем есть и ответ): вы просите "кусок кода" для сохранения файлов в папке ?

Comments

[NiceScript]

Да, нужна рабочая реализация.
А ещё возможно нужно по-другому реализовать передачу файлов на сервер.
Как блоб файлы передать на сервер

Answer 2

[kn1ght_t]

примерно так:

const receiveFile = (filepath, req, res) => {
  const wstream = fs.createWriteStream(filepath, {flags: 'wx'});

  req
    .pipe(wstream)
    .on('error', (e) => {
      if (e.code === 'EEXIST') {
        res.statusCode = 409;
        res.end('File Already Exists');
        return;
      }

      res.statusCode = 500;
      res.end('Internal Server Error');
    })
    .on('close', () => {
      res.statusCode = 201;
      res.end('File Created');
    });

  res.on('close', () => {
    if (res.finished) return;
    fs.unlink(filepath, (err) => {});
  });
};

Answer 3

[genius_spirit]

попробуйте через multer (https://github.com/expressjs/multer). я сохраняю файлы в /uploads и их названия кладу в БД