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

Posted 2023-03-03

【中文标题】Next.js 和 Ant Design Dragger：已部署实例上的文件上传失败

【英文标题】：Next.js & Ant Design Dragger: File upload fails on deployed instance

【发布时间】：2020-06-10 08:26:43

【问题描述】：

我正在尝试使用 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 实现文件上传？

【问题讨论】：

我遇到了同样的问题。如果您想通了，请在此处发布您的解决方案！

【参考方案1】：

通过将 prop action="https://www.mocky.io/v2/5cc8019d300000980a055e76" 传递给 <Upload/> 组件来实现此功能。

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

【参考方案2】：

受 Trey 回答的启发（并且因为我不想在域外的任何地方发送数据），我创建了一个简单返回成功的无操作 api 路由，然后指向 Ant Design <Upload>'s 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 路由。

【讨论】：

这是处理这个问题的好方法。您可能需要增加最大体型。您可以使用自定义 Config 对象执行此操作 -> nextjs.org/docs/api-routes/api-middlewares#custom-config

也为我工作。简单、干净的解决方案。