Next.js и Ant Design Dragger: загрузка файла не выполняется на развернутом экземпляре

Я пытаюсь создать загрузку файла с помощью 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

Пользовательский интерфейс, который я использую, выглядит следующим образом:

<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?


next.js file-upload antd http-status-code-405
person J. Hesters    schedule 26.02.2020    source источник
comment
У меня та же проблема. Пожалуйста, разместите здесь свое решение, если вы в нем разобрались!   -  person Trey Granderson    schedule 01.04.2020

Ответы (2)


arrow_upward
0
arrow_downward

Чтобы это заработало, передайте опору action="https://www.mocky.io/v2/5cc8019d300000980a055e76" компоненту <Upload/>.

Компонент загрузки ANTD должен сделать запрос POST для загрузки файла. Он либо делает этот запрос POST к текущему URL-адресу, что приводит к 405, либо к URL-адресу, указанному в action prop. https://www.mocky.io/v2/5cc8019d300000980a055e76 работает с этим URL.

person Trey Granderson    schedule 01.04.2020

arrow_upward
0
arrow_downward

Вдохновленный ответом Трея (и поскольку я не хотел отправлять данные куда-либо за пределы своего домена), я создал маршрут без использования 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.

person jimbotron    schedule 27.06.2021