1

我想在 Sanity Studio 中上传 PDF，然后在主站点内容中链接到这些 PDF。

我在 Sanity Studio 中的 simpleBlockContent 输入中添加了对包含“文件”字段的文档的引用。

我为 PDF 创建了一个文档架构：

export default {
  title: "PDF Upload",
  name: "pdfDocument",
  type: "document",
  fields: [
    {
      name: "title",
      type: "string",
      title: "Title",
      description: "This title will be used as a caption for the download.",
    },
    {
      name: "pdfFile",
      type: "file",
      title: "PDF File",
      options: {
        accept: ".pdf",
      },
      validation: (Rule) => Rule.required(),
      description: "Note that the file name will be visible to end users downloading the file.",
    },
  ],
};

我试图在我的输入组件的架构中引用它：

export default {
  title: "Simple Block Content",
  name: "simpleBlockContent",
  type: "array",
  of: [
    {
      title: "Block",
      type: "block",
      styles: [],
      marks: {
        annotations: [
          {
            name: "pdfLink",
            type: "object",
            title: "PDF download link",
            fields: [
              {
                name: "pdfReference",
                type: "reference",
                title: "PDF Document",
                to: [{ type: "pdfDocument" }],
              },
            ],
          },
        ],
      },
    },
  ],
};

但是，当我在前端将 pdfLink 添加到我的 serializers.js 时，从处理所有其他页面内容的 _rawContent graphql 查询传递给它的数据中没有任何类似文件链接的内容。

如何访问构建链接到已上传资产的 URL 所需的信息？

4

2 回答 2

1

根据文档，我还没有在序列化程序中执行此操作，但看起来资产 URL 应该可以在返回的文档中访问：

退回资产文件示例：

{
  "_id": "image-abc123_0G0Pkg3JLakKCLrF1podAdE9-538x538-jpg",
  "_type": "sanity.imageAsset", // type is prefixed by sanity schema
  "assetId": "0G0Pkg3JLakKCLrF1podAdE9",
  "path": "images/myproject/mydataset/abc123_0G0Pkg3JLakKCLrF1podAdE9-538x538.jpg",
  "url": "https://cdn.sanity.io/images/myproject/mydataset/abc123_0G0Pkg3JLakKCLrF1podAdE9-538x538.jpg",
  "originalFilename": "bicycle.jpg",
  "size": 2097152, // File size, in bytes
  "metadata": {
    "dimensions": {
      "height": 538,
      "width": 538,
      "aspectRatio": 1.0
    },
    "location":{ // only present if the original image contained location metadata
      "lat": 59.9241370,
      "lon": 10.7583846,
      "alt": 21.0
    }
  }
}
于 2021-02-12T02:00:51.987 回答
0

当有人上传理智的文件并且找不到任何好的解决方案时，我正在寻找一种在理智工作室中获得即时链接的方法，所以我想出了自己的

问题

让人们将文件上传到 sanity 并获得即时链接，他们可以在博客、案例研究等中复制和粘贴

解决方案

在选项中使用 slug 您可以访问文档，您可以在其中生成链接我的代码

import { tryGetFile } from '@sanity/asset-utils'; // this function creates production link

const pdfUploader = {
  name: 'pdfUploader',
  title: 'Upload PDF and Get Link',
  type: 'document',
  preview: {
    select: {
      title: 'title',
    },
  },
  fields: [
    {
      name: 'title',
      title: 'Title',
      description: 'Name displayed on pdf list',
      type: 'string',
      validation: (Rule) => [Rule.required()],
    },
    {
      name: 'pdfFile',
      title: 'Upload PDF File',
      description: 'PDF File you want to upload, once you upload click generate URL',
      type: 'file',
      validation: (Rule) => [Rule.required()],
    },
    {
      name: 'generatedPDFURL',
      title: 'Generate URL Link to this pdf',
      description:
        'Click GENERATE to get Link to pdf file, if you by mistake change it, click generate again. Then Copy link below and paste it anywhere you want',
      type: 'slug',
      options: {
        // this source takes all data that is currently in this document and pass it as argument
        // then tryGetFile() - getting file from sanity with all atributes like url, original name etc
        source: ({ pdfFile }) => {
          if (!pdfFile) return 'Missing PDF File';

          const { asset } = tryGetFile(pdfFile?.asset?._ref, {
            // put your own envs
            dataset: process.env.SANITY_DATASET,
            projectId: process.env.SANITY_PROJECT_ID,
          });
          return asset?.url;
        },
        // this slugify prevent from changing "/" to "-" it keeps the original link and prevent from slugifying
        slugify: (link) => link,
      },
      validation: (Rule) => [Rule.required()],
    },
  ],
};

export default pdfUploader;

在此之后在健全的上传文件中，然后单击生成以获取链接希望它可以帮助正在寻找类似解决方案的人，slug 不是完美的选择，但它正在工作:)

于 2021-12-29T18:40:35.403 回答