Next.js 和 Ant Design Dragger：部署实例上的文件上传失败

Question

我正在尝试使用 React 使用 Next.js 和 Ant Design 构建文件上传。

在本地主机上，一切正常。当我部署实例并尝试上传文件时，出现以下错误：

Request URL: https://my-app.my-team.now.sh/url/for/test/
Request Method: POST
Status Code: 405 
Remote Address: 34.65.228.161:443
Referrer Policy: no-referrer-when-downgrade

我使用的 UI 如下所示：

Request URL: https://my-app.my-team.now.sh/url/for/test/
Request Method: POST
Status Code: 405 
Remote Address: 34.65.228.161:443
Referrer Policy: no-referrer-when-downgrade

在哪fileUploadProps：

<Dragger {...fileUploadProps}>{renderImageUploadText()}</Dragger>

我想，这与 Next.js 的服务器端渲染有关？另一方面，它可能不会，因为当我导航到url/for/test它时，它应该在客户端上呈现。

如何使用 Ant Design 和 Next.js 实现文件上传？

Answer 1

Antd 的Upload 组件需要actionprop，它是发送数据的 URL。如果您不需要向 url 发送数据，您可以创建一个仅返回成功的 no-op api 路由，然后将 Ant <Upload>Designaction指向/api/noop

/* pages/api/noop.tsx */

import { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.status(200).end('noop')
}

/* Wherever I'm using <Upload /> */

<Upload
  ...otherProps
  action={'/api/noop'}
>

注意：这是特定于 Next.js 的，它可以轻松创建 API 路由。

Answer 2

action="https://www.mocky.io/v2/5cc8019d300000980a055e76"通过将 prop 传递给组件来使其工作<Upload/>。

ANTD Upload 组件必须发出 POST 请求才能上传文件。它要么向当前 url 发出 POST 请求（这会导致 405），要么向 prop 指定的 url 发出 POST 请求action。https://www.mocky.io/v2/5cc8019d300000980a055e76用作此网址。