Chargement de l'image à l'aide du formulaire Redux

j'ai react.js Redux-forme qui fonctionne et envoie des données à mon API, Mais j'ai aussi besoin de permettre à l'expéditeur de télécharger l'image avec le formulaire, idéalement avec la prévisualisation. Je me suis battu un peu et je suis arrivé à dropzone.js, Mais il semble que je ne peux pas faire ma forme vraiment POST Renvoie les données d'image.


render // {
const FILE_FIELD_NAME = 'files';

const renderDropzoneInput = /field/ => {
const files = field.input.value;
return /
<div>
<dropzone =="" e="" filestoupload,="" name="{field.name}" ondrop="{/"> field.input.onChange/filesToUpload/}
&gt;
<div>Try dropping some files here, or click to select files to upload.</div>
</dropzone>
{field.meta.touched &amp;&amp;
field.meta.error &amp;&amp;
<span classname="error">{field.meta.error}</span>}
{files &amp;&amp; Array.isArray/files/ &amp;&amp; /
<ul>
{ files.map//file, i/ =&gt; <li key="{i}">{file.name}<img src="{file.preview}/"/></li>/ }
</ul>
/}
</div>
/;
}

return /
<form onsubmit="{this.props.handleSubmit/this.onSubmit/}">
<div classname="form-group">
<field component="{renderDropzoneInput}" name="files"></field>
</div>
<button classname="btn btn-default" type="submit">Submit</button>
</form>
/;
}


Variable
files

revient vraiment POSTed Retour K. API, Ce qui est merveilleux, mais il contient ce qui suit:


[preview=blob:[url=http://localhost:3000/bed3762e-a4de-4d19-8039-97cebaaca5c1]http://localhost:3000/bed3762e ... ca5c1[/url]]


Quelqu'un peut-il me dire comment je peux obtenir des données binaires réelles dans cette variable, s'il vous plaît?

Code complet disponible ici
https://github.com/rushughes/d ... ex.js
Invité:

Babette

Confirmation de:

J'ai récemment eu un problème similaire et j'ai décidé d'utiliser FileReader API Convertir un objet blob url dans Base64 /Vous pouvez également convertir en chaîne binaire/.

Alors vous envoyez Base64 ou chaîne binaire sur le serveur.

Mon exemple de code:


onDrop/acceptedFiles: any/: any {

let images: any = this.state.Images;

acceptedFiles.forEach//file: any/ => {

const reader: FileReader = new FileReader//;
reader.onload = // => {
const fileAsBase64: any = reader.result.substr/reader.result.indexOf/","/ + 1/;
images.push/fileAsBase64/;
};

reader.onabort = // => console.log/"file reading was aborted"/;
reader.onerror = // => console.log/"file reading has failed"/;

reader.readAsDataURL/file/;
}/;

this.setState/prevState => /{
Images: images,
}//;
}


Si vous voulez envoyer une chaîne binaire à la place base64, changement
reader.readAsDataURL/file/;

sur
reader.readAsBinaryString/file/;


Et cette ligne:
const fileAsBase64: any = reader.result.substr/reader.result.indexOf/","/ + 1/;

peut être simplifié avant
const file: any = reader.result;

Alice

Confirmation de:

Voici les étapes de la fonction
file-upload

: /Comment gérer les données d'image dans votre API/

Ajoutez vos valeurs redux-form à

Copie FormData.


let formData = new FormData//;
formData.append/'myFile', files[0]/;


Envoyer une demande
multipart/form-data

du client à votre bibliothèque API Avec la bibliothèque

https://github.com/axios/axios
ou
fetch

:

Obtenez cette requête
multipart/form-data

dans votre API, Continuer avec

https://github.com/expressjs/multer
, puis écrivez le fichier dans
disk storage

ou
memory storage

de la manière suivante:


$ npm install --save multer



const multer = require/'multer'/

const storage = multer.diskStorage/{
destination: function /req, file, cb/ {
cb/null, '/tmp/my-uploads'/
},
filename: function /req, file, cb/ {
cb/null, file.fieldname + '-' + Date.now///
}
}/

const upload = multer/{ storage: storage }/

const app = express//

app.post/'/upload', upload.single/'myFile'/, /req, res, next/ => {
// req.file is the `myFile` file
// req.body will hold the text fields, if there were any
}/


/Optionnel/ travailler avec des fichiers juste de votre API

http://expressjs.com/en/starter/static-files.html

Alice

Confirmation de:

Il y a des solutions disponibles pour React.js de Dropzone. Veuillez vous référer à ce qui suit:

http://reactdropzone.azurewebsites.net/example/
/

Quel code peut être trouvé ici:
https://react.rocks/example/React-Dropzone
De plus, ces décisions vous aideront également à sortir du problème:

https://github.com/react-dropzone/react-dropzone
https://medium.com/technoetics ... 68f6b
http://blog.mauriziobonani.com ... tion/
/

https://css-tricks.com/image-u ... eact/
/

https://www.reddit.com/r/react ... eact/
/

Pour répondre aux questions, connectez-vous ou registre