Hemos visto el simple enfoque de subir el archivo usando , pero si tienes que usar la forma reducida junto con la forma en React, la forma estándar no será adecuada.
En ese caso, necesitarás configurar redux en la aplicación React para que la forma reducida funcione.

Instalación
Antes de empezar con el ejemplo, deberíamos instalar algunas dependencias, que se dan a continuación.
1234npm instalar reduxnpm instalar react-reduxnpm instalar redux-formnpm instalar axios
powerhell
El siguiente paso es configurar redux en nuestra aplicación React y crear un nuevo archivo llamado store.js. El fragmento de código debería verse así.
123456789importar{ crearAlmacenar, combinarReductores }de "redux";importar{reducir como reduxFormReducer }de "redux-form";const reducir =combinarReductores({ form: reduxFormReducer});const almacenar =crearAlmacenar(reducir);exportarAlmacenar por defecto;
js
Hemos creado el almacén usando el método createStore(). long con el método, se usa un argumento adicional, el reductor, para contener la instancia de la forma redux.
Ahora nuestro objeto de la tienda está creado y podremos usar la forma reducida en nuestra aplicación.
Nuestro siguiente paso es crear la forma usando la configuración de la forma reducida en el componente. La estructura básica se ve así.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980importReact,{Componente}de "reaccionar"; import{Field, reduxForm }de "redux-form";classFile upload to serverextendsComponent{constructor(){super();this. state={ name: "React"};}renderInput=({ input, type, meta })={const{ mime }=this. props;return(<div><inputname={input.name}type={type}accept={mime}onChange={event===;this.handleChange(event, input)}/></div;);};handleChange=(event, input)={{event. preventDefault();let imageFile = event.target.files[0];if(imageFile){const localImageUrl =URL.createObjectURL(imageFile);const imageObject =newwindow.Image(); imageObject.onload=()=>{ imageFile. imagenObject.naturalWidth; imageFile.height= imagenObject.naturalHeight; input.onChange(imageFile);URL.revokeObjectURL(imageFile);}; imagenObject. src= localImageUrl;}};render(){const{ handleSubmit }=this.props;return(<div><h2;File upload to server using redux-form in React</h2><hr/>div><formonSubmit={handleSubmit(this. onFormSubmit)};};tabla="image "type="file "component={this. renderInput}/{{{a]};};};/td.;};};tr;};td;};buttontype="submit"};Submit</button;};};};};};};};};};};};};};};};};};};};}: "myfileupload"})(Fileuploadtoserver);
jsx
Veamos lo que hemos implementado hasta ahora en este componente.
- Un formulario con el formulario de reducción de la presentación de un evento
- El elemento <Filed;que es la parte de redux-form que renderiza el tipo de entrada como un archivo usando la función genérica renderInput()
- Un evento de cambio de archivo de entrada que obtiene los detalles del archivo y, basado en los detalles, crea el nuevo objeto de la imagen junto con diferentes claves como el ancho y la altura
- El método reduxForm(), que se utiliza para inicializar la redux-form con una propiedad adicional llamada form que se utiliza para identificar el nombre de la forma.
Hemos configurado todas las configuraciones requeridas excepto el evento de envío de formularios, así que tan pronto como cambiemos el archivo, todos los detalles serán configurados para el archivo seleccionado.
El evento de envío de formularios, llamado onFormSubmit(), se verá así.
12345678910111213141516onFormSubmit=data==;{let formData =newFormData(); formData.append("nombre", data.image.name); formData.append("imagen", data. image);const config ={ headers:{"content-type": "multipart/form-data"}};const url ="API_URL";post(url, formData, config).then(function(response){console.log("FILE UPLOADED SUCCESSIONLY");}).catch(function(error){console.log("ERROR WHILE UPLOADING FILE");});};
jsx
Este método contiene la solicitud POST de Axios, que se utiliza para enviar el archivo seleccionado al servidor como los datos de la solicitud en forma de FormData().
Nota : Antes de usar el paquete Axios, necesitamos importar ese paquete de esta manera.
importar { post } de «axios»;
Ahora, si ejecutas este ejemplo cambiando el API_URL, podremos enviar los datos de la imagen al servidor sin ningún problema.