0 Câu hỏi: Tôi nhận được ctx.request.files không xác định khi tải lên hình ảnh với React

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Tôi đang cố tải lên một số hình ảnh từ React lên máy chủ Koa và lưu trữ chúng trên thư mục cụ thể. Tôi đã cố gắng làm như vậy bằng cách đưa hình ảnh vào trạng thái cục bộ của React và nối chúng vào đối tượng FormData và gửi đối tượng FormData đến máy chủ bằng axios.post Mặc dù toàn bộ quá trình dường như được thực hiện tốt, tôi không thể tìm và phân tích các hình ảnh tôi gửi đến máy chủ. Nó nói ctx.req.body và ctx.req.files không được xác định hoặc trống .. Tôi đã hiểu về vấn đề này và đã thử sử dụng các mô-đun phân tích cú pháp như koa-bodyparser và koa-multer nhưng có lẽ tôi đã không gặp may làm đúng Tôi đã đính kèm mã từ front-end và back-end của mình, vì vậy nếu bạn chia sẻ với tôi bất kỳ giải pháp nào, tôi sẽ rất biết ơn. Cho rằng tôi là một người hoàn toàn, xin hãy cụ thể.

Đây là mã của thành phần tải lên của tôi

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;

Và đây là mã của máy chủ 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');
});

Và đây là những phụ thuộc của tôi, trong trường hợp bạn cần biết ..

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

Tôi đã vắt đầu hơn một tuần và vẫn không biết làm thế nào để giải quyết nó .. Tôi rất biết ơn nếu bạn có thể cung cấp cho tôi bất kỳ giải pháp nào.

Tôi muốn phân tích formdata tôi đã gửi và lưu trữ hình ảnh trên một thư mục cụ thể trong máy chủ

    
0
0 Câu trả lời                              0                         
nguồn đặt đây