file-upload - Next.js & Ant Design Dragr : File upload fails on deployed instance

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

我使用的用户界面如下所示:

<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

通过传递 Prop action="https://www.mocky.io/v2/5cc8019d300000980a055e76" 让它起作用到 <Upload/>零件。

ANTD 上传组件必须发出 POST 请求才能上传文件。它要么向当前 url 发出 POST 请求，结果是 405，要么向 action 指定的 url 发出请求。支柱。 https://www.mocky.io/v2/5cc8019d300000980a055e76用作此网址。