React Native应用中使用Parse SDK实现文件存储指南

从 react native 应用程序保存文件 介绍 在本指南中，您将学习如何使用 parse javascript sdk 在您的 react native 应用程序中存储和检索文件，以管理 back4app 云存储。 在 parse 世界中，我们使用类型 parse file parse file 来管理文件。在创建了 parse file parse file , 您将使用 save() save() 方法将其存储在 back4app 云中。您应该始终将文件与另一个数据对象关联，以便在查询对象时可以检索此文件路径。如果您不关联，文件将被存储，但您将无法在云中找到它们。 另一个重要提示是给文件命名时要带有文件扩展名。这个扩展名让 parse 能够识别文件类型并相应处理。我们还应该提到，每次上传都会获得一个唯一标识符，因此使用相同名称上传多个文件没有问题。 react native 应用程序最常见的用例是存储图像。在本指南中，您将构建一个演示画廊应用程序来存储和显示图片。 本教程中创建的应用程序的完整示例代码在 这里 https //github com/templates back4app/react native demo gallery app 随意逐步跟随或直接跳到代码。 播放图像。 如果您不将文件与数据对象关联，文件将成为孤儿文件，您将无法在 back4app 云中找到它。 目标 创建一个使用 parse javascript 和 back4app 上传和显示图像的 react native 画廊应用程序。 先决条件 要完成本教程，您需要： 完成 安装 parse sdk 教程。 1 安装依赖项 在 react native 应用中处理文件（即上传照片）是最常见的功能之一。在本教程中，您将构建一个简单的画廊应用，上传并显示图像。 一旦您成功连接了一个 与 back4app 连接的 react native 项目 https //www back4app com/docs/parse sdk/react native sdk , 请转到其根目录并安装以下依赖项： 对于 ios，请安装 pods： 请注意，react native v0 60+ v0 60+ 版本支持自动链接，但有关安装 react native image picker react native image picker 的旧版本的信息，请 查看官方文档 https //github com/react native image picker/react native image picker 。 安装后，您需要将 nsphotolibraryusagedescription nsphotolibraryusagedescription 键添加到您的 info plist info plist 中，以允许用户从 ios 的照片中选择图像/视频。 在安卓上，选择照片以用于图库不需要任何权限。 2 从图库选择图像 接下来，您将构建一个组件，该组件封装了从图库选择图像和上传图像的用户界面和逻辑。 在您的根目录中，创建一个 uploadingimage js uploadingimage js 文件，内容如下 1 import react, {usestate} from 'react'; 2 import {view, button, image, stylesheet} from 'react native'; 3&#x9; 4 import {launchimagelibrary} from 'react native image picker'; 5 import parse from 'parse/react native js'; 6&#x9; 7 const uploadimage = () => { 8 const \[image, setimage] = usestate(null); 9&#x9; 10 async function upload() { 11 // todo implement this method 12 } 13 // this will open phone image library 14 function pickimage() { 15 launchimagelibrary( 16 { 17 mediatype 'photo', 18 includebase64 true, 19 maxheight 200, 20 maxwidth 200, 21 }, 22 (response) => { 23 // add selected image to the state 24 setimage(response); 25 }, 26 ); 27 } 28&#x9; 29 return ( 30 \<view> 31 \<button 32 onpress={pickimage} 33 title="pick an image from gallery" 34 color="#841584" /> 35 {image && \<image source={ {uri image uri} } style={styles currentimage}/>} 36&#x9; 37 {image && \<button title="upload" color="green" onpress={upload} />} 38 \</view> 39 ); 40&#x9; 41 }; 42&#x9; 43 const styles = stylesheet create({ 44 container { 45 height 400, 46 justifycontent 'center', 47 alignitems 'center', 48 }, 49 currentimage { 50 width 250, 51 height 250, 52 resizemode 'cover', 53 alignself 'center', 54 }, 55 }); 56&#x9; 57 export default uploadimage; 上述组件渲染： 一个按钮，当用户点击时打开图像库 所选图像以及一个上传按钮 如您所见， 上传 上传 方法没有做任何事情。接下来，您将实现其行为，并查看如何将图像实际上传到back4app云。 3 上传图像 back4app存储基于 parse file parse file ，允许您存储任何文件，例如文档、图像、视频、音乐和任何其他二进制数据。 parse file parse file 是parse javascript sdk提供的一个工具类，用于抽象文件存储过程并使其变得简单。 因此，要上传图像，您只需创建一个 parse file parse file 实例，然后调用保存方法。通过这样做，parse将自动为您完成其余的工作。您可以在这里阅读 关于parse文件的完整文档 https //docs parseplatform org/js/guide/#files 。 让我们在我们的 上传 上传 函数中做到这一点： 1 async function upload() { 2 // 1 create a file 3 const {base64, filename} = image; 4 const parsefile = new parse file(filename, {base64}); 5&#x9; 6 // 2 save the file 7 try { 8 const responsefile = await parsefile save(); 9 const gallery = parse object extend('gallery'); 10 const gallery = new gallery(); 11 gallery set('picture', responsefile); 12&#x9; 13 await gallery save(); 14 alert alert('the file has been saved to back4app '); 15 } catch (error) { 16 console log( 17 'the file either could not be read, or could not be saved to back4app ', 18 ); 19 } 20 } 简而言之，上面的代码片段创建并保存所选图像，并在保存完成后，将其与一个 parse object parse object 关联，名为 gallery gallery 现在您需要在您的 uploadimage uploadimage 组件中导入并使用 app js app js 1 import react from 'react'; 2 import {safeareaview, stylesheet} from 'react native'; 3 // in a react native application 4 import parse from 'parse/react native js'; 5 import asyncstorage from '@react native community/async storage'; 6 import keys from ' /constants/keys'; 7 //before using the sdk 8 parse setasyncstorage(asyncstorage); 9 parse initialize(keys applicationid, keys javascriptkey); 10 parse serverurl = keys serverurl; 11&#x9; 12 import uploadimage from ' /uploadimage'; 13&#x9; 14 const app = () => { 15 return ( 16 \<safeareaview style={styles container}> 17 \<uploadimage/> 18 \</safeareaview> 19 ) 20 }; 21&#x9; 22 const styles = stylesheet create({ 23 container { 24 backgroundcolor '#f5f5f5', 25 flex 1, 26 }, 27 title { 28 fontsize 18, 29 textalign 'center', 30 fontweight 'bold', 31 }, 32 }); 33&#x9; 34 export default app; 一旦您这样做，您应该能够从图库中选择图像 并成功上传图像，点击上传按钮： 4 显示图像 我们需要获取图像的 url 以检索图像的内容并将其显示给我们的用户。接下来，您将构建一个组件来从我们的 图库 图库 对象中查询图像并在 flatlist 上显示它们。 在您的根目录中，创建一个 gallery js gallery js 文件，内容如下： 1 import react, {usestate, useeffect} from 'react'; 2 import {text, image, flatlist, stylesheet} from 'react native'; 3&#x9; 4 import parse from 'parse/react native js'; 5&#x9; 6 const gallery = () => { 7 const \[images, setimages] = usestate(\[]); 8&#x9; 9 useeffect(() => { 10 const fetchimages = async () => { 11 let query = new parse query('gallery'); 12 const results = await query find(); 13 setimages(results); 14 }; 15 16 fetchimages(); 17 }, \[]); 18&#x9; 19 return ( 20 \<flatlist 21 style={styles container} 22 contentcontainerstyle={styles listcontent} 23 data={images} 24 horizontal={false} 25 numcolumns={3} 26 listemptycomponent={() => \<text>no images uploaded \</text>} 27 renderitem={({item}) => 28 \<image source={ {uri item get('picture') url()} } style={styles imageitem}/> 29 )} 30 keyextractor={(item) => item id} 31 />); 32 }; 33&#x9; 34 const styles = stylesheet create({ 35 container { 36 flex 1, 37 backgroundcolor '#f5f5f5', 38 }, 39 listcontent { 40 justifycontent 'center', 41 alignitems 'center', 42 }, 43 imageitem { 44 width 100, 45 height 100, 46 resizemode 'cover', 47 marginhorizontal 5, 48 marginvertical 5, 49 }, 50 }); 51&#x9; 52 export default gallery; 上述组件使用了 useeffect useeffect 钩子来查询上传到 gallery gallery 对象，一旦它完成渲染。接下来，您需要将组件添加到您的 app js app js 1 // other imports 2 import uploadimage from ' /uploadimage'; 3 import gallery from ' /gallery'; 4&#x9; 5 const app = () => { 6 return ( 7 \<safeareaview style={styles container}> 8 \<uploadimage/> 9 \<gallery/> 10 \</safeareaview> 11 ); 12 } 当您运行您的应用程序时，您应该能够看到上传的图像列表，如下所示 5 完成了! 此时，您已经在 back4app 上上传了您的第一张图像，并在 react native 应用程序中显示了它。