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）如下所示：

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

其中fileUploadProps是：

const fileUploadProps = {
  name: 'file',
  multiple: false,
  showUploadList: false,
  accept: 'image/png,image/gif,image/jpeg',
  onChange(info) {
    const { status } = info.file;
    if (status === 'done') {
      if (info.file.size > 2000000) {
        setUploadSizeError('File size is too large');
      } else {
        handleFieldValue(API_FORM_FIELDS.PICTURE, info);
      }
    } else if (status === 'error') {
      setUploadSizeError(`${info.file.name} file upload failed.`);
    }
  },
};

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

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

- J. Hesters

---

我遇到了同样的问题。如果你解决了，请在这里发布你的解决方案！ - Trey Granderson

Answer 1

Antd的上传组件需要action属性，该属性是发送数据的URL。如果您不需要将数据发送到URL，您可以创建一个空操作的API路由，只需返回成功，并将Ant Design的<Upload>的action指向/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路由变得简单。

- jimbotron

---

这是一个很好的处理方式。但你可能需要增加最大请求体大小。你可以通过自定义 Config 对象来实现 -> https://nextjs.org/docs/api-routes/api-middlewares#custom-config - lukasknk

也适用于我。简单、干净的解决方案。 - Alek

Answer 2

这对我很有效。

默认情况下，ANTD上传组件会发出POST请求以上传文件。因此，为了避免这种情况，请在Upload上添加customRequest属性，如下所示。

customRequest={({ onSuccess }) => setTimeout(() => { onSuccess("ok", null); }, 0) }

- Atit Timilsina

Answer 3

通过将属性action="https://www.mocky.io/v2/5cc8019d300000980a055e76"传递给<Upload/>组件，可以使其正常工作。

ANTD上传组件必须进行POST请求以上传文件。它会将该POST请求发送到当前URL，结果是405错误，或者发送到由action属性指定的URL。 https://www.mocky.io/v2/5cc8019d300000980a055e76 可以作为此URL使用。

- Trey Granderson