Next.js & Ant Design Dragger:已部署实例上的文件上载失败

Question

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

在localhost上，一切工作正常。当我部署实例并尝试上传文件时，我得到以下错误：

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实现文件上传？

Answer 1

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

ANTD Upload组件必须发出POST请求才能上载文件。它或者向产生405URL当前url发出POST请求，或者向由action prop指定的url发出POST请求。https://www.mocky.io/v2/5cc8019d300000980a055e76作为此url工作。

Answer 2

受到Trey的回答的启发(因为我不想将数据发送到我的域之外的任何地方)，我创建了一个简单地返回成功的无操作<Upload>路由，然后将Ant Design api的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的，这使得创建接口路由变得很容易。