Javascript 反应JS文件上传

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

以下是我的组件：

    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>
        );
    }

以及可处理的问题：

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
    });
}

这是要上载的文件列表

这是请求的数据

更新-操作文件夹中的CreateSponder函数：

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))
    }
}

我没有在你的代码中看到任何东西。上载图像时，由于过程是异步的，因此应使用承诺，或者在承诺得到解决时，使用axios发出post请求

handleUpload{return newPromiseresolve，reject=>{…}

汉德勒普洛德 res=>{//提出您的post请求}， rej=>{//句柄拒绝} ;

---

您有一个准确的示例，也许它会对您有所帮助。

我编写了一个操作，使用axios的异步等待。我已经用我前面提到的行动更新了这个问题。但即使使用async-await，它仍然会在请求负载中显示一个空的文件列表。

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))
    }
}