react native 如何上传文件/图片到 strapi数据库

文章目录

• 前言
• 一、数据交换方式
• 二. formdata包装数据
• 三.完整代码
• • • • 解析一
      • 解析二
      • 参考文章

        ---

        前言

        折腾了一段时间，发现在strapi上传文件是出名的困难，而且官方文档上传文件教程也没有针对react native的部分，仅仅通过它的nodejs和browser代码在rn中套用行不通，其中还有些细节的纰漏。

        开始前请确保自己已经按照官方教程安装好strapi

        ---

        提示：以下是本篇文章正文内容，下面案例可供参考

        一、数据交换方式

        react native 中你可以使用自带的fetch函数进行数据通信，不过这里我用了apisauce，这个库操作更方便简洁。

        下载指令：npm i apisauce

        // 
        import { create } from 'apisauce'
        // 定义api，这里的baseURL是必须的，它会作为一个根地址，headers可选，他会在以后每次发送数据的时候加上。如果你发送的stapi地址有开token用户密钥必须加X-API-KEY
        const api = create({ baseURL: 'http://xxx.xxx.xxx.xxx:1337/',  //填上你自己的根地址
          headers: { 'X-API-KEY':  '这里填你的token' },
        })
        // 接收数据
        api
          .get('/moments？populate=*')
          .then(console.log)
        // 发送数据，三个参数一地址，二数据，三附加headers，如果create时有headers，这里的headers只会附加上去，不会覆盖。
        api.post('/users', { name: 'steve' }, { headers: { 'x-gigawatts': '1.21' } })
        

        二. formdata包装数据

        在react native 中上传文件到服务器需要使用formdata对数据进行包装。其实打包完就是一个字典一样的东西{{},{}}

        简单介绍一下用法

         const form = new FormData()
          form.append('data', JSON.stringify({ title: 'new' }))
        

        注意：append接收两个参数，key和data,data的类型只能是string，blob或file.

        三.完整代码

        代码如下：

        const uploadImage = ( name, uri, type) => { const form = new FormData()
          form.append('data', JSON.stringify({ title: 'new' }))
          form.append('files.image', { name: name,
            type: type,
            uri: Platform.OS === 'ios' ? uri.replace('file://', '') : uri,
         })
          const headers = { 'Content-Type': 'multipart/form-data',
          }
          return api.post('/moments', form, { headers })
        }
        

        解析一

        如果上传的是非文件类型的数据，在form.append中这个key必须是‘data’，而且需要用JSON.stringify()将数据转换为字符串；如果要上传各类文件（视频图片等），这个key必须是files,；如果你是把文件上传到strapi指定的entry中，那这个key就是files.[name],比如我这里的文件是一个图片，给他的name就是image，那key就是 files.image

        解析二

        对于如何在rn中配置好文件的数据形式，strapi文档中是没有详细指出的。不过我在油管的这个视频找到了答案：How to Upload File/Image to Server with Form Data in React Native

        记住这个数据形式

        {name: filename,  //你上文件的文件名，可以自定义，例如 test.jpg
            type: mimetype,   //mime文件类型，例如 image/jpg
            uri: localfilepath   //如果是本地文件直接填上本地文件路径就好，不过注意安卓中一定要在文件路径前面加上file://，ios不用
        }
        

        所有mime type 参考mdn mime

        ---

        参考文章

        strapi upload

        How to upload an image from a URL in React Next.js to Strapi

        github Uploading files with apisauce #37

        Upload photo from react native app to strapi api