javascript - React-native Invalid UTF-8 detected while trying to read a image file - Stack Overflow

admin管理员组

文章数量:1356844

I am trying to read an image file using the URI using react-native-fs and redux-saga:

file:///var/mobile/Containers/Data/Application/605FB6C0-869C-4128-883E-A59616933C64/Documents/images/52108C66-A087-4942-9DD4-22CBD0327089.jpg

Below is the line where I am getting an error while trying to read the image file:

const imageFile = yield call([RNFS, RNFS.readFile], logo.uri);

Below is the error I am getting:

Error: Invalid UTF-8 detected
    at decodeSymbol (utf8.js:194)
    at Object.utf8decode [as decode] (utf8.js:206)
    at FSmon.js:150
    at tryCallOne (core.js:37)
    at core.js:123
    at JSTimers.js:301
    at _callTimer (JSTimers.js:154)
    at _callImmediatesPass (JSTimers.js:202)
    at Object.callImmediates (JSTimers.js:470)
    at MessageQueue.__callImmediates (MessageQueue.js:275)
    at MessageQueue.js:140

Can someone please tell me what I am doing wrong?

I am trying to read an image file using the URI using react-native-fs and redux-saga:

file:///var/mobile/Containers/Data/Application/605FB6C0-869C-4128-883E-A59616933C64/Documents/images/52108C66-A087-4942-9DD4-22CBD0327089.jpg

Below is the line where I am getting an error while trying to read the image file:

const imageFile = yield call([RNFS, RNFS.readFile], logo.uri);

Below is the error I am getting:

Error: Invalid UTF-8 detected
    at decodeSymbol (utf8.js:194)
    at Object.utf8decode [as decode] (utf8.js:206)
    at FS.mon.js:150
    at tryCallOne (core.js:37)
    at core.js:123
    at JSTimers.js:301
    at _callTimer (JSTimers.js:154)
    at _callImmediatesPass (JSTimers.js:202)
    at Object.callImmediates (JSTimers.js:470)
    at MessageQueue.__callImmediates (MessageQueue.js:275)
    at MessageQueue.js:140

Can someone please tell me what I am doing wrong?

• javascript
• react-native
• react-redux
• redux-saga
• react-native-fs

Share Improve this question Follow edited Jan 16, 2018 at 7:25 Sumanth Jois asked Jan 16, 2018 at 7:09 Sumanth JoisSumanth Jois 3,23444 gold badges3030 silver badges4747 bronze badges 7

• The link contains …, which should not be included in the URI. – Raptor Commented Jan 16, 2018 at 7:10
• Should I replace that? because thats what Uri I got when the user selected an image – Sumanth Jois Commented Jan 16, 2018 at 7:12
• It shouldn't be. It's just too long to be displayed in full. The actual URI is not this one. Please double check. – Raptor Commented Jan 16, 2018 at 7:13
• Sorry I edited the question I have changed the uri please check it out – Sumanth Jois Commented Jan 16, 2018 at 7:14
• perhaps you don't have to read the content, what do you want to do exactly? upload an image ? if so, just find some library to do it, it's weird to get some binary file content in javaScript – yangguang1029 Commented Jan 16, 2018 at 7:46

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 7

This is how it worked for me with a JPEG file on iOS :

(...)
var RNFS = require('react-native-fs');
(...)
var uri = '{your file uri}'
var img = 'file:///' + (uri.replace('file://', '')); // Must do that for RNFS

RNFS.readFile(img, 'base64') // 'base64' to process binary format
    .then((file) => {
      console.log("Getting image");
      console.log(file);
    })

RNFS only read file as string, the default encoding is utf8. image is binary file, you should try some other library to read it

本文标签： javascriptReactnative Invalid UTF8 detected while trying to read a image fileStack Overflow