Question

我正在尝试将一些图像从React上传到Koa服务器，并将它们存储在特定的文件夹中。我试图通过将图像放在React的本地状态上并将它们附加到FormData对象上来做到这一点，然后使用axios.post将FormData对象发送到服务器即使整个过程似乎都可以完成，我也无法找到或解析已发送到服务器的图像。它说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;

这是koa服务器的代码

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"
  },

我已经压头了一个多星期，但仍然不知道如何解决。如果您能为我提供任何解决方案，我将非常感谢。

我想解析我发送的表单数据，并将图像存储在服务器中的特定文件夹中

使用React上传图像时出现未定义的ctx.request.files

0 个答案: