javascript - 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 发出发布请求。

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

handleUpload.then(
(res) => {//发出发布请求 },
(rej) => {//处理拒绝}
);

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