文档

检查官员 文档 更多信息.

快速启动

下一个. js 设置

安装

先安装所需的软件包.

npm install @edgestore/server @edgestore/react

环境变量

那就去你身边 盘子,创建新工程,并复制环境变量的密钥.

EDGESTORE_ACCESS_KEY=your-access-key
EDGESTORE_SECRET_KEY=your-secret-key

后端

现在,我们可以为我们的Next.js应用程序创建后端代码.
EdgeStore与Next.js两种应用程序兼容(pages router 财务报告和审定财务报表 app router) (中文(简体) ).

下面的例子就是用EdgeStore可以创建的最简单的桶. 只是一个简单的文件桶,没有验证,任何有链接的人都可以访问.

应用程序中可以有多个桶,每个桶都有自己的配置.

import { initEdgeStore } from '@edgestore/server';
import { createEdgeStoreNextHandler } from '@edgestore/server/adapters/next/app';

const es = initEdgeStore.create();

/**
 * This is the main router for the EdgeStore buckets.
 */
const router = es.router({
  publicFiles: es.fileBucket(),
});

const handler = createEdgeStoreNextHandler({
  router,
});

export { handler as GET, handler as POST };

/**
 * This type is used to create the type-safe client for the frontend.
 */
export type EdgeStoreRouter = typeof router;

前端

现在让我们启动我们的背景提供者.

'use client';

import { createEdgeStoreProvider } from '@edgestore/react';
import { type EdgeStoreRouter } from '../app/api/edgestore/[...edgestore]/route';

const { EdgeStoreProvider, useEdgeStore } =
  createEdgeStoreProvider<EdgeStoreRouter>();

export { EdgeStoreProvider, useEdgeStore };

然后把我们的应用程序和供应商包裹起来.

import { EdgeStoreProvider } from '../lib/edgestore';
import './globals.css';

// ...

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <EdgeStoreProvider>{children}</EdgeStoreProvider>
      </body>
    </html>
  );
}

上传文件

你可以用这个 useEdgeStore 钩子可以访问一个类型安全前端客户端并使用它来上传文件.

import * as React from 'react';
import { useEdgeStore } from '../lib/edgestore';

export default function Page() {
  const [file, setFile] = React.useState<File>();
  const { edgestore } = useEdgeStore();

  return (
    <div>
      <input
        type="file"
        onChange={(e) => {
          setFile(e.target.files?.[0]);
        }}
      />
      <button
        onClick={async () => {
          if (file) {
            const res = await edgestore.publicFiles.upload({
              file,
              onProgressChange: (progress) => {
                // you can use this to show a progress bar
                console.log(progress);
              },
            });
            // you can run some server action or api here
            // to add the necessary data to your database
            console.log(res);
          }
        }}
      >
        Upload
      </button>
    </div>
  );
}

替换文件

通过传递 replaceTargetUrl 选项,可以将已有文件替换为新文件. 它会在上传完成后自动删除旧文件.

您也可以使用同名文件上传文件,但在这种情况下,由于CDN缓存,您可能还会暂时看到旧文件.

两种方法都删除旧文件, 所以桶需要 beforeDelete,就像删除.

const res = await edgestore.publicFiles.upload({
  file,
  options: {
    replaceTargetUrl: oldFileUrl,
  },
  // ...
});

删除文件

await edgestore.publicFiles.delete({
  url: urlToDelete,
});