将图像转换为 expo 中的 base64 react-native（仅在前端）：PayloadTooLargeError：请求实体太大

Question

I'm trying to convert the image to base64 in expo react-native app by using the next code:

 import * as FileSystem from 'expo-file-system'; ...... const base64 = await FileSystem.readAsStringAsync(result.uri, { encoding: 'base64' });

but I get this error:

 PayloadTooLargeError: request entity too large at readStream (C:\Users\rapha\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@expo\dev-server\node_modules\raw-body\index.js:155:17) at getRawBody (C:\Users\rapha\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@expo\dev-server\node_modules\raw-body\index.js:108:12) at read (C:\Users\rapha\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@expo\dev-server\node_modules\body-parser\lib\read.js:77:3).... at Server.app (C:\Users\rapha\university\MA\third year\finalProject\argon-react-native-master\oneWay\node_modules\connect\index.js:51:37) at Server.emit (events.js:315:20) at Server.EventEmitter.emit (domain.js:483:12) at parserOnIncoming (_http_server.js:790:12) at HTTPParser.parserOnHeadersComplete (_http_common.js:119:17)

I'm looking for a solution only in the frontend, in this step the app not using the backend.

how can I fix it? thanks

Answer 1

I tried many solutions but nothing for me then I decided to resize the image to quality 0.5 and it work to me

 let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes:await ImagePicker.MediaTypeOptions.All, allowsEditing:true, aspect:[4,3], quality:0.5 }).... const base64 = await FileSystem.readAsStringAsync(result.uri, { encoding: 'base64' });

Answer 2

The problem is not this line, it works properly. It is the fetch API or the server file size limit.

Answer 3

con la libreria https://docs.expo.dev/versions/latest/sdk/imagepicker/ podes hacerlo sin usar la otra..

const result = await ImagePicker.launchImageLibraryAsync({ base64: true, quality: 1 });

console.log(result.base64) console.log(result.uri)