Wgranie zdjęcia za pomocą formularza redux
Mam formularz respons.js redux, który działa i przesyła dane z powrotem do mojego API, ale muszę też zezwolić nadawcy na przesłanie obrazu wraz z formularzem, najlepiej z podglądem. Trochę się zmagałem i dotarłem do dropzone.js, ale nie mogę uzyskać mojego formularza, aby faktycznie POST dane obrazu z powrotem.
render () {
const FILE_FIELD_NAME = 'files'; const renderDropzoneInput = (field) => {
const files = field.input.value;
return ( <div>
<Dropzone
name={field.name}
onDrop={( filesToUpload, e ) => field.input.onChange(filesToUpload)}
>
<div>Try dropping some files here, or click to select files to upload.
</Dropzone>
{field.meta.touched &&
field.meta.error &&
<span className="error">{field.meta.error}</span>}
{files && Array.isArray(files) && ( [list]
{ files.map((file, i) => <li key={i}>{file.name}<img src={file.preview}/>[/*]) }
[/list]
)}
);
} return ( <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
<div className="form-group">
<Field name="files" component={renderDropzoneInput}/>
<button type="submit" className="btn btn-default">Submit</button>
</form>
);
}Zmienna
filesrzeczywiście jest przesyłana z powrotem do interfejsu API, co jest świetne, ale zawiera następujące elementy:
[preview=blob:[url=http://localhost:3000/bed3762e-a4de-4d19-8039-97cebaaca5c1]http://localhost:3000/bed3762e ... ca5c1[/url]]Czy ktoś może zasugerować, jak mogę pobrać rzeczywiste dane binarne do tej zmiennej?
Pełny kod jest dostępny tutaj
https://github.com/rushughes/d ... ex.js
https://github.com/rushughes/d ... ex.js
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
3 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Następnie wysyłasz Base64 lub ciąg binarny na serwer.
Mój przykładowy kod:
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,
}));
}
Jeśli chcesz wysłać ciąg binarny zamiast base64, zmieńnaa ten wiersz:
const fileAsBase64: any = reader.result.substr (reader.result.indexOf (",") + 1);można uprościć doAnonimowy użytkownik
Potwierdzenie od:
Oto kroki funkcji: (jak obsługiwać dane obrazu w interfejsie API)
>
let formData = new FormData();formData.append('myFile', files[0]);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 })Anonimowy użytkownik
Potwierdzenie od:
http:// reactdropzone.azurewebsites.net/example
http://reactdropzone.azurewebsites.net/example/
/
Jaki kod można znaleźć tutaj:
https://react.rocks/example/React-Dropzone
https://react.rocks/example/React-DropzoneCo więcej, te rozwiązania pomogą Ci w jakiś sposób wyjść z problemu:
https://github.com/react-dropzone/react-dropzone
https://github.com/react-dropzone/react-dropzone
https://medium.com/technoetics ... 68f6b
https://medium.com/technoetics ... 68f6b
http:// blog.mauriziobonani.com/dropzone.js-react.js-and-fluxxor-integration
http://blog.mauriziobonani.com ... tion/
/
https://css-tricks.com/image-u ... react
https://css-tricks.com/image-u ... eact/
/
https://www.reddit.com/r/react ... react
https://www.reddit.com/r/react ... eact/
/