Я получаю неопределенные ctx.request.files при загрузке изображения с помощью React - PullRequest
Новая
       13

Я получаю неопределенные ctx.request.files при загрузке изображения с помощью React

0 голосов
/ 08 мая 2019

Я пытаюсь загрузить некоторые изображения с React на сервер Koa и сохранить их в определенной папке. Я попытался сделать это, поместив изображения в локальное состояние React и добавив их в объект FormData, и отправил объект FormData на сервер с помощью axios.post Несмотря на то, что весь процесс, кажется, сделан правильно, я не могу ни найти, ни проанализировать изображения, которые я отправил на сервер. В нем говорится, что ctx.req.body и ctx.req.files не определены или пусты .. Я гуглил об этой проблеме и пытался использовать модули синтаксического анализа, такие как koa-bodyparser и koa-multer, но пока не получил удачи .. возможно, я этого не сделал сделай это правильно. Я прикрепил код из моего внешнего интерфейса и внутреннего интерфейса, поэтому, если вы поделитесь со мной каким-либо решением, я буду благодарен. Учитывая, что я полный нуб, пожалуйста, будьте конкретны.

Это код моего загружаемого компонента 

class Uploader extends Component {
    constructor(props) {
        super(props);        
        this.state={
            selectedFile: ''
        }
    }    
    onChangeHandler= (e) => {
        this.setState({
            selectedFile: e.target.files[0]
        })
    }
    onClickHandler= () => {
        const data=new FormData();
        data.append('file', this.state.selectedFile, this.state.selectedFile.fileName);

        for(var value of data.values()) {
            console.log(value);
        }

        axios.post('http://localhost:4000/upload', data);
        .then(() => {
            console.log('axios.post successful... i guess...');
        }).catch(() => {
            console.log('axios.post failed...');
        });
    }

    render() {
        return (
            <div>
                <input type='file' name='file' onChange={this.onChangeHandler} />
                <button type='button' onClick={this.onClickHandler}>Upload</button>
            </div>
        );
    }
}
export default Uploader;

А это код сервера коа 

const Koa=require('koa');
const Router=require('koa-router');
const cors=require('@koa/cors');
const bodyParser=require('koa-bodyparser');

const app=new Koa();
const router=new Router();

app.use(cors());
app.use(bodyParser());
app.use(async (ctx, next) => {
    ctx.body=ctx.request.body;

    next();
});

router.get('/upload', (ctx) => {
    ctx.body='it worked!';
});
router.post('/upload', (ctx) => {
    console.log('working finally...');

    console.log('ctx.req.body');
    console.dir(ctx.req.body); //undefined
    console.log('-----');

    console.log('ctx.req.files');
    console.dir(ctx.req.files); //undefined
    console.log('-----');

    console.log('ctx.request.body');
    console.dir(ctx.request.body); //{}
    console.log('-----');

    console.log('ctx.request.files');
    console.dir(ctx.request.files); //undefined
    console.log('-----');
});
app.use(router.routes()).use(router.allowedMethods());

app.listen(4000, () => {
    console.log('Koa server starts');
});

А это мои зависимости, на случай, если вам нужно знать .. 

"dependencies": {
    "@koa/cors": "^2.2.3",
    "co-busboy": "^1.4.0",
    "koa": "^2.7.0",
    "koa-better-body": "^3.0.4",
    "koa-body": "^4.1.0",
    "koa-bodyparser": "^4.2.1",
    "koa-cors": "0.0.16",
    "koa-multer": "^1.0.2",
    "koa-router": "^7.4.0",
    "koa2-cors": "^2.0.6"
  },

Я сжимал голову более недели и до сих пор не знаю, как ее решить .. Я очень благодарен, если вы можете предложить мне какое-либо решение.

Я хочу проанализировать отправленные мной формоданные и сохранить изображения в определенной папке на сервере

...