首页 > 解决方案 > React Native:如何在 React Native 中使用 FileReader

问题描述

我是开发应用程序和 React Native 的新手。我正在开发一个电子签名应用程序,我想通过导入带有密码的“.pfx”文件来添加新的认证。我正在使用 react-native-document-picker 从设备中选择文件并将其存储在 useState 中,并在另一个中输入密码。

我的 handleChooseFile 代码:

const handleChooseFile = async () => {
        //Opening Document Picker for selection of one file
        try {
            const res = await DocumentPicker.pick({
                type: [DocumentPicker.types.allFiles],
            });

            console.log('res = ', res)
            //Setting the state to show single file attributes
            setSelectedFile(res)

        } catch (err) {
            //Handling any exception (If any)
            if (DocumentPicker.isCancel(err)) {
                //If user canceled the document selection
                alert('Canceled from single doc picker');
            } else {
                //For Unknown Error
                alert('Unknown Error: ' + JSON.stringify(err));
                throw err;
            }
        }
    };

我看到了这个用于读取文件的 ReactJS 代码,我已经尝试过了。

我的句柄提交代码:

const handleSubmit = (e) => {
        e.preventDefault();

        // Do something with the files
        console.log(selectedFile);

        //const reader = new FileReader();

        const reader = new FileReader();
        reader.onload = function (e) {
            const fileContent = e.target.result;

            // decrypt p12 using the password returned by getPassword(), the password should be protected and not hard coded 
            try {
                // get p12 as ASN.1 object
                const p12Asn1 = forge.asn1.fromDer(fileContent);

                const p12 = forge.pkcs12.pkcs12FromAsn1(p12Asn1, pwd);

                // get bags by type
                const certBags = p12.getBags({ bagType: forge.pki.oids.certBag });
                const pkeyBags = p12.getBags({ bagType: forge.pki.oids.pkcs8ShroudedKeyBag });
                // fetching certBag
                const certBag = certBags[forge.pki.oids.certBag][0];
                // fetching keyBag
                const keybag = pkeyBags[forge.pki.oids.pkcs8ShroudedKeyBag][0];
                // generate pem from private key
                //var privateKeyPem = forge.pki.privateKeyToPem(keybag.key);
                // generate pem from cert
                //var certificate = forge.pki.certificateToPem(certBag.cert);

                if (certBag && keybag) {
                    console.log(certBag.cert);
                    console.log('Success then upload file!');
                    setStatus('Check password PASS then upload file...');
                    uploadFile();
                }

            } catch (error) {
                console.log(error);
                console.log('Fail!');
                setStatus('Fail!');
            };
        };
        reader.readAsBinaryString(selectedFile);
    }

一旦我运行这个函数,它就会出错:'rader.readAsBinryString 不是一个函数'。如何在 React Native 中执行 FileReader。

标签: reactjsreact-native

解决方案


推荐阅读