分类 开发 下的文章

本文采用文件md5
在src/index.js

  register({ strapi }) {
    // Override the default upload info formatter with custom function.
    strapi.services["plugin::upload.upload"].formatFileInfo =
      require("./extensions/upload/overrides").formatFileInfoOverride;
    strapi.services["plugin::upload.upload"].enhanceAndValidateFile =
      require("./extensions/upload/overrides").enhanceAndValidateFileOverride;
  },

overrides.js

const _ = require("lodash");
const path = require("path");
const { extension } = require("mime-types");
const crypto = require("crypto");
const fs = require("fs");

/**
 * Overriding formatFileInfo function for upload plugin to
 * maintain original file naming.
 */
async function formatFileInfoOverride(
  { size, type, filename, filepath },
  fileInfo = {},
  metas = {}
) {
  const fileService = strapi.plugin("upload").service("file");
  console.log("fileService", fileService);

  let ext = path.extname(filename);

  if (!ext) {
    ext = `.${extension(type)}`;
  }
  const usedName = (fileInfo.name || filename).normalize();
  const basename = path.basename(usedName, ext);

  // 计算文件的 MD5 值
  const fileBuffer = await fs.promises.readFile(filepath);
  const md5sum = crypto.createHash("md5").update(fileBuffer).digest("hex");

  // 使用 MD5 值作为文件名
  const customFileName = `${md5sum}`;

  const entity = {
    ext,
    mime: type,
    hash: md5sum,
    name: usedName,
    folder: fileInfo.folder,
    caption: fileInfo.caption,
    alternativeText: fileInfo.alternativeText,
    size: Math.round((size / 1000) * 100) / 100,
    folderPath: await fileService.getFolderPath(fileInfo.folder),
  };

  const { refId, ref, field } = metas;

  if (refId && ref && field) {
    entity.related = [
      {
        id: refId,
        __type: ref,
        __pivot: { field },
      },
    ];
  }

  if (metas.path) {
    entity.path = metas.path;
  }

  if (metas.tmpWorkingDirectory) {
    entity.tmpWorkingDirectory = metas.tmpWorkingDirectory;
  }
  console.log("entity", entity);
  return entity;
}
async function enhanceAndValidateFileOverride(file, fileInfo = {}, metas = {}) {
  console.log("enhanceAndValidateFile", file);
  const currentFile = await this.formatFileInfo(
    {
      filename: file.name,
      type: file.type,
      size: file.size,
      filepath: file.path,
    },
    fileInfo,
    {
      ...metas,
      tmpWorkingDirectory: file.tmpWorkingDirectory,
    }
  );
  currentFile.getStream = () => fs.createReadStream(file.path);

  const { optimize, isImage, isFaultyImage, isOptimizableImage } = strapi
    .plugin("upload")
    .service("image-manipulation");

  if (await isImage(currentFile)) {
    if (await isFaultyImage(currentFile)) {
      throw new ApplicationError("File is not a valid image");
    }
    if (await isOptimizableImage(currentFile)) {
      return optimize(currentFile);
    }
  }
  return currentFile;
}
module.exports = {
  formatFileInfoOverride,
  enhanceAndValidateFileOverride,
};

虽然不同版本的 iPhone 浏览器对 CSS 的支持程度可能略有不同,但一般来说,iPhone 浏览器对大部分 CSS 属性都是支持的,但也有一些 CSS 属性暂时不支持或者支持程度有限,常见的包括:

  1. aspect-ratio: iOS Safari 不支持此属性。
  2. resize: iOS Safari 不支持 resize 属性。
  3. touch-action: iOS Safari 对于一些值的支持程度有限,如 pan-x, pan-y
  4. overscroll-behavior: iOS Safari 不支持此属性。
  5. clip-path: 在某些 iOS 版本上,clip-path 的兼容性不如其他浏览器,需要进行兼容性处理。

需要注意的是,不同版本的 iOS 和 Safari 对 CSS 的支持情况有所不同,建议在实际使用时进行测试和兼容处理。

background-clip 是一个 CSS 属性,用于指定背景图片或颜色应该绘制到元素的哪个区域。该属性可用于控制背景图片或颜色的裁剪方式,以及控制背景是否应该延伸到元素的边框区域。它有以下取值:

  • border-box:默认值,背景延伸到边框的外沿;
  • padding-box:背景延伸到内边距边界;
  • content-box:背景仅限于内容框内。

除了以上三个取值,还有一个叫做 text 的取值,它可以将背景限制在文本的前景色范围内。

例如,如果要将背景图片限制在内边距边界内,可以这样设置:

background-clip: padding-box;

如果要将背景图片限制在文本的前景色范围内,可以这样设置:

background-clip: text;

clip-path 属性用于定义一个裁剪路径,裁剪路径可以是基于形状的(如圆形、椭圆形、多边形等),也可以是基于图片的(如使用 SVG 路径或图片作为裁剪路径)。使用 clip-path 可以让我们实现一些炫酷的效果,如不规则形状的图像、文本环绕、动态进度条等。

使用 clip-path 属性,可以通过以下方式定义裁剪路径:

  1. 使用基本形状:可以通过 circle()ellipse()inset()polygon()path() 等函数定义基本形状的裁剪路径。
  2. 使用 SVG 路径:可以使用 SVG 路径作为裁剪路径,需要使用 url() 函数引用 SVG 文件或内联 SVG。
  3. 使用图片作为裁剪路径:可以使用图片作为裁剪路径,需要使用 url() 函数引用图片文件。

以下是一些 clip-path 的示例:

  1. 使用基本形状定义裁剪路径:
.element {
  clip-path: circle(50%);
}
  1. 使用 SVG 路径作为裁剪路径:
.element {
  clip-path: url(path-to-svg-file.svg#clip-path);
}
  1. 使用图片作为裁剪路径:
.element {
  clip-path: url(path-to-image-file.png);
}

需要注意的是,clip-path 属性在某些浏览器上可能不被支持,需要使用厂商前缀来实现跨浏览器兼容。此外,clip-path 属性会对性能产生一定影响,应该谨慎使用。

shape-outside是一个CSS属性,用于定义元素的形状,它可以让文本围绕一个非矩形的形状排列。具体来说,shape-outside属性可以将一个形状定义为CSS基本形状、SVG路径、图像、边框半径或其他CSS形状。这可以用于实现一些非常酷炫的效果,例如将文本环绕在一个不规则形状的图片周围。

shape-outside属性需要结合使用floatclearmargin等属性来控制元素的位置和排列。在使用shape-outside属性时,需要注意它的浏览器兼容性,不同浏览器对该属性的支持程度可能不同,需要做好兼容性处理。

以下是shape-outside属性的一个示例:

div {
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
  margin: 20px;
  background-color: #ccc;
}

这个例子会将一个200x200像素的div元素放在页面左侧浮动,并将它的形状设置为一个半径为100像素的圆。这将导致文本围绕这个圆形状排列,形成一个非常独特的效果。