0

Осуществляю загрузку изображений на сервер node.js через multer.js. После чего обрабатываю изображение с помощью библиотеки sharp и перезаписываю это изображение удаляя необработанную копию через fs.unlinkSync(req.file.path). Каким образом я могу обработать изображение ДО ТОГО как оно запишется на сервер? Думал написать миддлвару, которая бы из реквеста получала буффер с изображением, и перезаписывала бы в реквесте поля с изображением передавая его дальше в multer. Так сохранялась бы уже обработанная копия изображения. Но как это сделать и правильно ли для этого использовать sharp?

const express = require('express')
const multer = require('multer')
const sharp = require('sharp')
const storage = require('./upload-config')
const upload = multer(storage)
const path = require('path')
const fs = require('fs')
const app = express()

const router = new express.Router
app.use(router)

router.get('/', (req, res) => {
    res.send('ok')
})
router.post('/upload',upload.single('image') ,async (req, res) => {
   const { filename: image } = req.file 

   await sharp(req.file.path)
    .resize(500)
    .jpeg({quality: 50})
    .toFile(
        path.resolve(req.file.destination,'resized',image)
    )
    fs.unlinkSync(req.file.path)

    return res.send('SUCCESS!')
})
app.listen(3333, () => {
    console.log('server on!')
})

file upload/config

const multer = require('multer')
const path = require('path')

module.exports = {
    storage : new multer.diskStorage({
        destination : path.resolve(__dirname, ".","uploads"),
        filename : function(req, file, callback) {
            callback(null, file.originalname)
        }
    })
}

UPD. По ответу из комментария @nörbörnën попробовал сам разобраться по его коду и литературы, которую нашел по кастомным движкам для малтера.

Ниже представлен сырой код, который не работает и мне нужно понять правильно ли я двигаюсь или же свернул куда то не туда)

Код движка

 const fs = require('fs');
    const path = require('path');
    const sharp = require('sharp');
        
        const resolveImageStream = (size, quality, imageStream) => {
          // eslint-disable-next-line no-param-reassign
          imageStream = imageStream.resize(size.width, size.height, size.option).toFormat('jpeg').jpeg({ quality });
      return imageStream;
    };
    
    function transformer(size, quality) {
      let imageStream = sharp();
      imageStream = resolveImageStream(size, quality, imageStream);
      return imageStream;
    }
    
    class MulterSharp {
      constructor(opts) {
        if (opts.destination) this.destination = opts.destination;
        if (opts.filename) this.filename = opts.filename;
        if (!opts.size || !opts.quality) {
          throw new Error('UNDEF_COMPRESSION');
        }
        this.size = opts.size;
        this.quality = opts.quality;
      }
    
    
      async getDestination(req, file, cb) {
        let dirpath;
    
        if (typeof this.destination === 'string') {
          dirpath = this.destination;
        } else if (typeof this.destination === 'function') {
          dirpath = await this.destination(req, file);
        }
        if (dirpath === null || dirpath === undefined || !/\S/.test(dirpath)) {
          throw new Error('DESTINATION_WRONG');
        }
    
        await fs.promises.mkdir(dirpath, { recursive: true, mode: '0775' });
    
        if (cb) {
          cb(null, dirpath);
        }
    
        return dirpath;
      }
    
      async getFilename(req, file, cb) {
        let filepath;
    
        if (typeof this.filename === 'function') {
          filepath = await this.filename(req, file);
        } else {
          filepath = this.filename;
        }
    
        if (cb) {
          cb(null, filepath);
        }
    
        return filepath;
      }
    
      async _handleFile(req, file, cb) {
        let destination;
        let filename;
        try {
          [destination, filename] = await Promise.all([
            this.getDestination(req, file),
            this.getFilename(req, file),
          ]);
        } catch (err) {
          throw err;
        }
    
        const finalPath = path.join(destination, filename);
    
        const { stream } = file;
        const resizerStream = transformer(this.size, this.quality);
        const writeStream = fs.createWriteStream(this.destination);
    
        this._uploadOne({
          stream,
          finalPath,
          resizerStream,
          writeStream,
          cb,
        });
    
        return null;
      }
    
      _removeFile(req, file, cb) {
        fs.unlink(file.path, cb);
      }
    
      _uploadOne({
        stream,
        finalPath,
        resizerStream,
        writeStream,
        cb,
      }) {
        try {
          stream.pipe(resizerStream).pipe(writeStream);
          resizerStream
            .on('info', info => console.info(JSON.stringify(info)))
            .on('error', function (transformErr) {
              resizerStream.unpipe(writeStream);
              cb(transformErr);
              this.end();
            });
          writeStream
            .on('error', function (gcErr) {
              cb(gcErr);
              this.end();
            })
            .on('finish', () => cb(null, {
              destination: this.destination,
              filename: this.filename,
              path: finalPath,
            }));
        } catch (err) {
          console.log(err);
        }
      }
    }
    
    module.exports = opts => new MulterSharp(opts);

Инстанс кастомного движка

const multerSharp = require('../multer_storage');

const storage = dir => multerSharp({
  destination: `uploads/${dir}`,
  filename: async (req, file, cb) => {
    // eslint-disable-next-line max-len
    await cb(null, `${cyrillicToTranslit().transform(file.originalname, '_').slice(0, 10).toLowerCase()}_${moment().format('DD.MM.YYYY_HH:mm:ss')}${mimeTypeToFileType(file.mimetype)}`);
  },
  size: +config.get('const.imageSizePx'),
  quality: +config.get('const.imageQualityPercent'),
});

exports.uploadClients = multer({ storage: storage('clients') });

И сам роут с миддлварой

  // POST upload client image
  router.post('/avatar', uploadClients.single('file'), (req, res) => {
    responseLogger(req.file.path, req, 200);
    return res.send({ response: req.file.path.replace(`/workspace/${config.get('env')}/`, '') });
  });

Код еще не работает, но хочу выслушать все недочеты и минусы по коду, как его улучшить и тд. Сейчас постоянно ошибка выпадает cb is not a function. Скорее всего из-за того, что не использую promisify?

4
  • 1
    я писал как это сделать используя multer + jimp. с sharp подход тот же. если сам не разберёшься, могу вечером набросать пример 17 фев 2021 в 13:52
  • @nörbörnën Весьма кстати. Спасибо, ознакомлюссь. Мне был бы полезен набросок, если не трудно
    – Glechik
    17 фев 2021 в 14:01
  • @nörbörnën не совсем понял только часть с обработкой файла в _handleFile . Не получается прикрутить туда sharp с буффером. Буду весьма благодарен за помощь)
    – Glechik
    18 фев 2021 в 0:24
  • @nörbörnën взгляни пожалуйста, если есть пару минут. Обновил вопрос
    – Glechik
    18 фев 2021 в 20:28

1 ответ 1

0

С помощью ответа @nörbörnën в теме с водяными знаками на фото, мне удалось сделать эту задачу. Код движка для малтера:

   /**
 * @project static-service
 * @author Yuriy Galay
 * @version 1.0
 * @since 18.02.2021
 */
// ----------custom multer storage engine----------
const fs = require('fs');
const path = require('path');
const os = require('os');
const sharp = require('sharp');

const resolveImageStream = (size, quality, imageStream) => {
  // eslint-disable-next-line no-param-reassign
  imageStream = imageStream.resize(size).toFormat('jpeg').jpeg({ quality });
  return imageStream;
};

function transformer(size, quality) {
  let imageStream = sharp();
  imageStream = resolveImageStream(size, quality, imageStream);
  return imageStream;
}

class MulterSharp {
  constructor(opts) {
    if (typeof opts.destination === 'string') {
      // create directory if not exists. Synchronous func.
      fs.mkdirSync(opts.destination, { recursive: true }, (cb, err) => {
        if (err) {
          if (err.code === 'EEXIST') cb(null); // ignore the error if the folder already exists
          else cb(err); // something else went wrong
        }
      });

      this.destination = ($0, $1, cb) => { cb(null, opts.destination); };
    } else {
      this.destination = (opts.destination || this.getDestination);
    }
    if (opts.filename) this.filename = opts.filename;
    if (!opts.size || !opts.quality) {
      throw new Error('UNDEF_COMPRESSION');
    }
    this.size = opts.size;
    this.quality = opts.quality;
  }

  async getDestination(req, file, cb) {
    // os.tmpdir() returns the operating system's default directory for temporary files as a string
    cb(null, os.tmpdir());
  }

  async _handleFile(req, file, cb) {
    await this.destination(req, file, (err, destination) => {
      if (err) return cb(err);

      // eslint-disable-next-line no-shadow
      this.filename(req, file, (err, filename) => {
        if (err) return cb(err);
        const fileName = `${filename.substr(0, filename.lastIndexOf('.'))}.jpeg`;
        const finalPath = path.join(destination, fileName);

        const { stream } = file;
        const resizerStream = transformer(this.size, this.quality);
        const writeStream = fs.createWriteStream(`${finalPath}`);

        this._uploadOne({
          stream,
          finalPath,
          resizerStream,
          writeStream,
          cb,
        });

        return null;
      });
      return null;
    });
  }

  _removeFile(req, file, cb) {
    const filePath = file.path;

    delete file.destination;
    delete file.filename;
    delete file.path;

    fs.unlink(filePath, cb);
  }

  _uploadOne({
    stream,
    finalPath,
    resizerStream,
    writeStream,
    cb,
  }) {
    try {
      stream.pipe(resizerStream).pipe(writeStream);
      resizerStream
        .on('error', (transformErr) => {
          resizerStream.unpipe(writeStream);
          cb(transformErr);
          this.end();
        });
      writeStream
        .on('error', (gcErr) => {
          cb(gcErr);
          this.end();
        })
        .on('finish', () => cb(null, {
          destination: this.destination,
          filename: this.filename,
          path: finalPath,
        }));
    } catch (err) {
      throw err;
    }
  }
}

module.exports = opts => new MulterSharp(opts);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.