如何使用expo从文件系统读取jpg文件?

时间:2019-01-12 09:50:12

标签: react-native expo

我使用代码使用expo下载了图片(a.jpg):

 FileSystem.downloadAsync(
                    httpUrl,
                    FileSystem.documentDirectory + location
                ).then((result)=>{
                    const uri = result.uri;
                }).catch((err)=>{
                    console.log("​getFile -> err", err);}
);

文件已成功保存在文件系统中。稍后,当我尝试读取文件时,出现错误,表明无法读取文件。用于读取文件的代码:

const fileInfo = await FileSystem.getInfoAsync(uri);
if(fileInfo.exists){
            FileSystem.readAsStringAsync(uri).then(data => {
                const base64 = 'data:image/jpg;base64' + data;
                resolve(data) ; 
            }).catch(err => {
                console.log("​getFile -> err", err);
                reject(err) ;
            });
 }

上面的代码返回一个错误,无法读取文件。 fileInfo.exists为true,因为文件存在于文件系统中。

 ​getFile -> fileInfo Object {
    "exists": 1,
     "isDirectory": false,
     "modificationTime": 1547272322.8714085,
     "size": 51725,
    "uri": "file:///Users/deeparora/Library/Developer/CoreSimulator/Devices/A2DC4519-       C18C-4512-8C23-E624A1DAA506/data/Containers/Data/Application/6D7B23AA-      A555-4F9A-B9D1-EB5B9443CCB6/Documents/ExponentExperienceData/       %2540anonymous%252Fhola-vet-6faee8ac-e309-4d5b-a1c0-6f8688f8a508/a.jpg",
:}

读取文件时出错:

err [Error: File 'file:///Users/deeparora/Library/Developer/CoreSimulator/Devices/A2DC4519-C18C-4512-8C23-E624A1DAA506/data/Containers/Data/
Application/6D7B23AA-A555-4F9A-B9D1-EB5B9443CCB6/
Documents/ExponentExperienceData/%2540anonymous%252Fhola-vet-6faee8ac-e309-4d5b-a1c0-6f8688f8a508/a.jpg' could not be read.]

如果我尝试读取文本文件(a.json)而不是jpg(a.jpg),则一切正常。因此,FileSystem.readAsStringAsync对于文本文件(而不是jpg)可以正常工作。可能是,此方法需要提供其他参数作为选项,以便它可以将jpg读取为base64字符串。

1 个答案:

答案 0 :(得分:2)

这是由于您没有告诉FileSystem.readAsStringAsync您需要的编码类型是base64。

尝试使用

let options = { encoding: FileSystem.EncodingTypes.Base64 };
FileSystem.readAsStringAsync(uri, options).then(data => {
            const base64 = 'data:image/jpg;base64' + data;
            resolve(base64); // are you sure you want to resolve the data and not the base64 string? 
        }).catch(err => {
            console.log("​getFile -> err", err);
            reject(err) ;
        });

您可以在文档中查看有关不同选项的更多信息。 https://docs.expo.io/versions/latest/sdk/filesystem#expofilesystemreadasstringasyncfileuri-options

以下是与async/await https://snack.expo.io/Hk-m38wfN

一起使用时的零食