ios - react native 相机 : Access snapped image

Question

我在我的应用中使用了 react-native-camera 插件。我正在尝试拍摄图像，然后立即通过 AWS Amplify 将其上传到 AWS S3 存储桶。

我的代码如下所示:

export default class Camera extends Component {
render() {
    return (
        <View style={styles.container}>
            <RNCamera
                ref={ref => {
                    this.camera = ref;
                }}
                style={styles.preview}
                flashMode={RNCamera.Constants.FlashMode.auto}
                permissionDialogTitle={'Permission to use camera'}
                permissionDialogMessage={'We need your permission to use your phone\'s camera'}
            />
            <TouchableOpacity
                onPress={this.takePicture.bind(this)}
                style={styles.capture}
            >
                <Text style={{fontSize: 15}}> SNAP </Text>
            </TouchableOpacity>
        </View>
    );
}

takePicture = async function () {
    if (this.camera) {
        const options = {base64: true};
        const data = await this.camera.takePictureAsync(options);
        console.log(data.uri);
        uploadPictureToS3(data.uri, "image.jpg");
    }
};
}

function readFile(fileUri) {
    return RNFetchBlob.fs.readFile(fileUri, 'base64').then(data => new Buffer(data, 'base64'));
}

function uploadPictureToS3(uri, key) {
    readFile(uri).then(buffer => {
        Storage.put(key, buffer, {
            contentType: "image/jpeg"
        })
    })
        .then(r => {
            console.log(r);
        })
        .catch(e => {
        console.error(e);
    });
}

尝试使用 readFile 方法访问文件时出现以下错误:错误:文件不存在。

这里发生了什么？为什么我无法在拍摄后直接从缓存文件夹中读取图像？

Answer 1

尽管有一些“奇怪”的东西，但您的代码看起来还不错。

您将选项 base64 传递给 takePictureAsync。这使得相机返回自动拍摄的照片的 base64，但你不使用它做任何事情。您可以执行 uploadPictureToS3(data.base64, "image.jpg"); 并跳过 readFile 方法。

还有一个就是，不知道为什么会这样，从uri中获取图片base64我们通常会这样做:
const filepath = data.uri.split('//')[1];
const imageUriBase64 = await RNFS.readFile(filepath, 'base64');


因此请尝试使用 const filepath = data.uri.split('//')[1]; 技巧，而不是直接传递 data.uri。