Экспресс-загрузка файлов (React, Express, MongoDB) - PullRequest
0 голосов
/ 06 ноября 2019

Я пытаюсь загрузить файлы из внешнего интерфейса в конечный. Однако я получаю 400 неверных запросов. Кто-нибудь может мне помочь? Огромное спасибо!

Вот моя версия пакета

"express": "^4.17.1",
"mongoose": "^5.7.3",
"react": "^16.9.0",
"reqwest": "^2.0.5",
"antd": "^3.23.0",
"express-fileupload": "^1.1.6-alpha.6",

Вот мой бэкэнд Если я удалю оператор if исохраните типичную модель, тогда ошибки не возникнет. Поэтому я думаю, что req.files не работает.

const express = require('express')
const Router = express.Router()
const app = express();
Router.use(fileUpload());

Router.post('/addFile', function(req, res){
        if (!req.files || Object.keys(req.files).length === 0) {
            return res.status(400).send('No files were uploaded.');
        }


})

Вот мой интерфейс Если я распечатываю значение fileList до инициализации formData, я могу видетьФайловый объект.

import React from 'react';
import {Upload, Button, Icon, message} from 'antd';
import 'antd/dist/antd.css';
import reqwest from 'reqwest';  

class Demo extends React.Component {
  state = {
    fileList: [],
    uploading: false,
  }

  handleUpload = () => {
    const { fileList } = this.state;
    // multipart/form-data
    const formData = new FormData();
    formData.append('file1', fileList[0]);   

    this.setState({
      uploading: true,
    });

    // You can use any AJAX library you like
    reqwest({
      url: '/user/addFile',   
      method: 'post',
      processData: false,
      data: formData,
      success: () => {
        this.setState({
          fileList,
          uploading: false,
        });
        message.success('upload successfully.');
      },
      error: () => {
        this.setState({
          uploading: false,
        });
        message.error('upload failed.');
      },
    });
  }

  render() {
    const { uploading, fileList } = this.state;
    const props = {
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };

    return (
      <div>
        <Upload {...props}>
          <Button>
            <Icon type="upload" /> Select File
          </Button>
        </Upload>
        <Button
          type="primary"
          onClick={this.handleUpload}
          disabled={fileList.length === 0}
          loading={uploading}
          style={{ marginTop: 16 }}
        >
          {uploading ? 'Uploading' : 'Start Upload' }
        </Button>
      </div>
    );
  }
}
export default Demo;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...