CODEWITHSUNDEEP
file-uploadblobimage-uploadreact-native-image-pickerreact-native-blob-util
user938363
user938363

Reputation: 10350

jpg image file can't be open after OSS upload

The React Native 0.70 app uses react-native-blob-util to read jpg image file from image picker before uploading it to OSS. Here is the code:

import ReactNativeBlobUtil from "react-native-blob-util"; //v0.19
const fileData = await ReactNativeBlobUtil.fs.readFile(filePath, 'base64'); //filePath is the file path from image picker
const fileData1 = `data:image/jpeg;base64,${fileData}`

The fileData1 was uploaded with fetch:

const response = await fetch(preSignedUrl, {. //preSignedUrl is acquired from backend node server
    method: 'PUT',
    headers: { 'Content-Type': 'image/jpeg' },
    body: fileData1,
  })

The image uploaded can't be open. The md5(fileData1) before fetch PUT is the same as the md5 returned from OSS. It may be related to the jpg file format on OSS but not sure where is the issue.

UPDATE: return of await fetch(filePath) (fetch fileData1 throws error):

LOG  responsefetch in uploadTOOSS:  {"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "44313295-9de3-4dfe-b9be-bbdef6110f4b", "lastModified": 0, "name": "rn_image_picker_lib_temp_9373b67e-6f10-4932-b743-f2155da4fca8.jpg", "offset": 0, "size": 47367, "type": "image/jpeg"}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "44313295-9de3-4dfe-b9be-bbdef6110f4b", "lastModified": 0, "name": "rn_image_picker_lib_temp_9373b67e-6f10-4932-b743-f2155da4fca8.jpg", "offset": 0, "size": 47367, "type": "image/jpeg"}}, "bodyUsed": false, "headers": {"map": {"content-type": "image/jpeg"}}, "ok": false, "status": 0, "statusText": "", "type": "default", "url": ""}

Upvotes: 2

Views: 115

Answers (0)

Related Questions