0
318
Views¿Cómo subir una imagen con reaccionar nativo?
Subo una imagen con react js así:
const onSubmit = (e) => { console.log(e.img); form.append("file", e.img.originFileObj); Axios.post("url", form, { headers: { Authorization: `bearer ${localStorage.getItem("token")}`, }, }) };y el registro de la consola para e.img es:
Ahora, en reaccionar nativo, uso el paquete react-native-image-crop-picker .
y después de configurar el archivo de imagen, da un objeto como este:
{"cropRect": {"height": 960, "width": 960, "x": 0, "y": 160}, "height": 400, "mime": "image/jpeg", "modificationDate": "1636923018000", "path": "file:///storage/emulated/0/Android/data/com.myapp/files/Pictures/33fc6a3f-3673-4756-8343-6f6bcb3c1a7b.jpg", "size": 89454, "width": 400}Ahora, cuando intento cargar la imagen, da un error sobre el archivo img.
Y el backend es node js y manejo archivos de imagen con multer como este:
const multer = require('multer'); const uuid = require('uuid'); const MIME_TYPE_MAP = { 'image/png': 'png', 'image/jpeg': 'jpeg', 'image/jpg': 'jpg' }; const fileUpload = multer({ limits: 20000000000, storage: multer.diskStorage({ destination: (req, file, cb) => { cb(null, 'upload/img'); }, filename: (req, file, cb) => { const ext = MIME_TYPE_MAP[file.mimetype]; cb(null, uuid.v4() + '.' + ext); } }), fileFilter: (req, file, cb) => { const isValid = !!MIME_TYPE_MAP[file.mimetype]; let error = isValid ? null : new Error('Invalid mime type!'); cb(error, isValid); } }); module.exports = fileUpload;¿Cómo puedo publicar el archivo de imagen en reaccionar nativo como lo hago en reaccionar js?
·
Juan Pablo Isaza
2 answers
Answer question0
Solución 1
Al igual que reactjs, aquí puede usar FormData y agregar un archivo de esta manera:
asycn function uploadImage() { const formData = new FormData(); const imageData = { uri: cropImageData.path, // file uri/path name: 'MyImage.jpg', //file name type: cropImageData.mime, //file type } formData.append("file", imageData); await fetch(url, { method: "POST", headers: { 'Content-Type': 'multipart/form-data', Authorization: token, }, data: formData, }).then((response), { console.log(response) }).catch((error) => console.log(response)); }Solución 2
o puede enviar una cadena base64 desde los datos (puede obtener base64 del selector de imágenes recortadas)
asycn function uploadImage() { await fetch(url, { method: "POST", headers: { 'Content-Type': 'application/json', Authorization: token, }, data: JSON.stringify({ file: imageBase64String, }), }).then((response), { console.log(response) }).catch((error) => console.log(response)); }aquí, en lugar de buscar, también puede usar axios.
·
Juan Pablo Isaza
Report
0
Resolví el problema de esta manera.
ImagePicker.openPicker({ width: 400, height: 400, cropping: true, includeBase64: true, }) .then(image => { setImg(image); }) .then(() => setModalVisible(prev => !prev)); const nn = JSON.stringify(img.path).substring( JSON.stringify(img.path).lastIndexOf('/') + 1, ); const image = { name: nn, uri: img.path, type: img.mime, size: img.size, lastModifiedDate: JSON.parse(img.modificationDate), uid: img.modificationDate, }; const form = new FormData(); form.append('file', image); axios .post('url', form, { headers: { Authorization: `bearer ${JSON.parse(token)}`, }, })
·
Juan Pablo Isaza
Report
Answer question