React JS文件上传

Question

我正在尝试上传单个图像文件并将其路径保存到数据库中。但是，当我尝试发送上传的图片时（它们的详细信息保存在应用程序的状态中），关于发送的图片，请求的有效负载是空的。

这是我的组件：

    renderForm() {
        return (
            <div>
                <form onSubmit={ this.handleSubmit }>
                    <div className="uniform">
                        <div className="12u 12u%(medium)">
                            <ImageUploader 
                                withIcon={ true }
                                buttonText='Upload'
                                onChange={ this.onDrop }
                                imgExtension={ ['.jpg', '.png'] }
                                maxFileSize={ 6291456 }
                            />
                        </div>
                    </div>
                </form>
                <input /*onClick={ this.handleSubmit }*/ type="submit" value="Submit" />
            </div>
        );
    }

这是我的 onDrop 处理程序：

    onDrop(picture) {
        this.setState({
            images: this.state.images.concat(picture)
        });
    }

还有句柄提交：

handleSubmit(event) {
    event.preventDefault();
    console.log(this.state.images) // at this point, the list of files is populated, as present in the image below.
    axios.post('http://127.0.0.1/scoala-de-iarna/api/web/api/create-sponsor', {
        name: this.state.name,
        images: this.state.images
    });
}

这是要上传的文件列表。

这是请求的数据。

更新 - actions 文件夹中的 createSponsor 函数：

export function createSponsor(values) {
    return async (dispatch, getState) => {
        await axios({
            url: `${ROOT_URL}api/create-sponsor`,
            method: 'post',
            data: {
                name: values.name,
                images: values.images
            }
        })//.then((response) => dispatch(dispatchCreateSponsor(response)));
        .then(response => console.log(response))
    }
}

Answer 1

我在您的代码中没有看到任何promises。当你上传你的图片时，因为这个过程是异步的，你应该使用promises 或async await 并且当promise 被解决时，使用axios 发送你的post 请求。

handleUpload() { return newPromise((resolve, reject) => { ... }) }

handleUpload.then( (res) => { // make your post request }, (rej) => { // handle rejection} );

Here你有一个准确的例子，也许它会帮助你。