I use 'expo-image-picker' library to get image.
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
aspect: [3, 3],
quality: 0,
allowsMultipleSelection: false,
allowsEditing: true,
});
I try to set quality = 0 but when I send request by method post to server, I get** 413 error.**
const register = async (data, image) => {
const bodyFormData = new FormData();
bodyFormData.append('name', data.name);
console.log(image);
if (image) {
const fileType = image.split('.').pop();
const mimeType =
fileType === 'png' || 'jpg' || 'jpeg' || 'PNG' || 'JPG' || 'JPEG';
bodyFormData.append('avatar', {
uri: image,
name: `image.${fileType}`,
type: mimeType,
});
}
bodyFormData.append('email', data.email);
bodyFormData.append('password', data.password);
return await requester({
requestFunc: () =>
Request.Server.post(API_SERVER.REGISTER(), bodyFormData, {
headers: {
'Content-Type': 'multipart/form-data',
},
}),
})();
};
I tried to send a request with some low resolution photos, but it still works.
I also find out about "Expo ImageManipulator" library, but it also set "quality" same as "expo-image-picker" library.
If the image is extremely large then setting the quality like that is really not optimal, so is there any way to limit it?
expo-image-picker
and get its URI:let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
ImageManipulator
to resize or compress the image. Here's an example of resizing the image to 50% of its original size:const manipResult = await ImageManipulator.manipulateAsync(
uri,
[{resize: {width: result.width / 2, height: result.height / 2}}],
{compress: 0.5, format: ImageManipulator.SaveFormat.JPEG}
);
const resizedUri = manipResult.uri;
resizedURI
to create a new FormData object and append the image data to it:const formData = new FormData();
formData.append('image', {
uri: resizedUri,
name: 'image.jpg',
type: 'image/jpeg',
});
// post formData to server
// post formData to server
This way, you can resize or compress the image before posting it to the server, which can help avoid the 413 Payload Too Large error
.
Well, This might solve the current use case. But I would recommend you use the API for the same. It will help you to manage enough payload and scalability, and customised resizing features.