Загрузить файл как ответ на загрузку multipart / form-data - PullRequest
Новая
       52

Загрузить файл как ответ на загрузку multipart / form-data

0 голосов
/ 04 августа 2020

У меня есть приложение, которое выполняет POST-запрос multipart / form-data для одного файла. Я заставил ответ API вернуть двоичный файл. У меня установлен заголовок HTTP-ответа Content-Disposition. Однако Chrome не открывает окно загрузки. Я вижу данные ответа на вкладке «Сеть».

Я использую Next. js (React для внешнего интерфейса, Node.js для внутреннего интерфейса) Я использую компонент Ant Design Upload (https://ant.design/components/upload/)

Заголовки запросов 

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,es-CO;q=0.8,es;q=0.7,he;q=0.6
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 369
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary6W2gcw6XVWeZHONq
Host: localhost:3000
Origin: http://localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36
X-Requested-With: XMLHttpRequest

Заголовки ответов 

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: OPTIONS, GET
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
Content-Disposition: attachment; filename="SOS.xlsx"
Date: Tue, 04 Aug 2020 10:05:47 GMT
Connection: keep-alive
Transfer-Encoding: chunked

Компонент Ant 

const { Dragger } = Upload;

const MESSAGE_SUCCESS_DURATION = 3;
const MESSAGE_FAILURE_DURATION = 7;

const EXCEL_MIME_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';

const props = {
    accept: EXCEL_MIME_TYPE,
    name: 'file',
    multiple: false,
    showUploadList: false,
    action: `${process.env.apiClient.url}/seed-data`,
    onChange(info) {
        console.log('info', info)
        const { status } = info.file;
        if (status !== 'uploading') {
            console.log(info.file, info.fileList);
        }
        if (status === 'done') {
            message.success(`${info.file.name} file uploaded successfully.`, MESSAGE_SUCCESS_DURATION);
            //const blob = new Blob([info.file.response], {type: `${EXCEL_MIME_TYPE};charset=utf-8`});
            //FileSaver.saveAs(blob, "file.xlsx");

        } else if (status === 'error') {
            const details = info.file && info.file.response && info.file.response.msg;
            message.error(`${info.file.name} file upload failed. ${details ? details : ''}`, MESSAGE_FAILURE_DURATION);
        }
    },
};

export default () =>
    (
<Dragger {...props}>
    <p className="ant-upload-drag-icon">
        <InboxOutlined />
    </p>
    <p className="ant-upload-text">Click or Drag LandVision CSV File Here</p>
    <p className="ant-upload-hint">
        Only a single CSV file supported at this time
    </p>
</Dragger>)
...