如何自定义strapi图像上传以使用第三方库进行图像压缩？

Question

我是 Strapi 的新手，我试图找到一种方法来压缩上传到 Strapi 的图像，然后将其提供给静态 gatsby 网站。有什么办法我可以做到这一点？我找到了 image-compressor.js npm 库，但我不知道如何将它集成到每个内容类型中的字段和 WYSWYG 编辑器的strapi中。有人可以帮帮我吗？如果可能的话，我们可以根据 gatsby 中的显示大小自定义它上传到 Strapi 吗？

第一次尝试集成图像压缩器：

这是我的upload.js：

const Compressor = require('image-compressor')
module.exports = {
upload: async (ctx) => {
    // Retrieve provider configuration.
    const config = await strapi.store({
      environment: strapi.config.environment,
      type: 'plugin',
      name: 'upload'
    }).get({ key: 'provider' });

    // Verify if the file upload is enable.
    if (config.enabled === false) {
      strapi.log.error('File upload is disabled');
      return ctx.badRequest(null, ctx.request.admin ? [{ messages: [{ id: 'Upload.status.disabled' }] }] : 'File upload is disabled');
    }

    // Extract optional relational data.
    const { refId, ref, source, field } = ctx.request.body.fields;
    let { files = {} } = ctx.request.body.files;

    if (_.isEmpty(files)) {
      return ctx.send(true);
    }

    //integrate image-compressor library to enhance uploaded image
    var imageCompressor = new Compressor.ImageCompressor;

    var compressorSettings = {
            toWidth : 100,
            toHeight : 100,
            mimeType : 'image/png',
            mode : 'strict',
            quality : 0.6,
            grayScale : true,
            sepia : true,
            threshold : 127,
            vReverse : true,
            hReverse : true,
            speed : 'low'
        };

    files.map(file => imageCompressor.run(file, compressorSettings), () => {})

    // Transform stream files to buffer
    // const buffers = await strapi.plugins.upload.services.upload.bufferize(ctx.request.body.files.files);
    const buffers = await strapi.plugins.upload.services.upload.bufferize(files.files);
    const enhancedFiles = buffers.map(file => {
      if (file.size > config.sizeLimit) {
        return ctx.badRequest(null, ctx.request.admin ? [{ messages: [{ id: 'Upload.status.sizeLimit', values: {file: file.name} }] }] : `${file.name} file is bigger than limit size!`);
      }

      // Add details to the file to be able to create the relationships.
      if (refId && ref && field) {
        Object.assign(file, {
          related: [{
            refId,
            ref,
            source,
            field
          }]
        });
      }

      return file;
    });

    // Something is wrong (size limit)...
    if (ctx.status === 400) {
      return;
    }

    const uploadedFiles = await strapi.plugins.upload.services.upload.upload(enhancedFiles, config);

    // Send 200 `ok`
    ctx.send(uploadedFiles.map((file) => {
      // If is local server upload, add backend host as prefix
      if (file.url && file.url[0] === '/') {
        file.url = strapi.config.url + file.url;
      }

      if (_.isArray(file.related)) {
        file.related = file.related.map(obj => obj.ref || obj);
      }

      return file;
    }));
  },

我得到了这个错误，运行strapi start：

/home/mike/Desktop/clik.asia.admin/node_modules/image-compressor/image-compressor.js:295
})(window, document);
   ^

ReferenceError: window is not defined
    at Object.<anonymous> (/home/mike/Desktop/clik.asia.admin/node_modules/image-compressor/image-compressor.js:295:4)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/mike/Desktop/clik.asia.admin/plugins/upload/controllers/Upload.js:10:20)
    at Module._compile (module.js:652:30)

Answer 1

如果您愿意，您可以自定义 upload service 以添加自定义逻辑（使用 image-compressor.js）在上传之前压缩您的图像。

这里是/upload路由的控制器：https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-upload/controllers/Upload.js#L12

这里是服务功能：https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-upload/services/Upload.js#L56

Answer 2

目前这仅通过 Strapi 是不可能的。我建议您将文件上传到 Cloudinary (https://github.com/strapi/strapi/tree/master/packages/strapi-upload-cloudinary) 并使用他们的 API 调整它们的大小。