react使用axios 上传文件

转载

goody 2024-10-11 13:24:34

文章标签 react使用axios 上传文件 react native 数据库 react.js 数据 文章分类 iOS 移动开发

文章目录

前言
一、数据交换方式
二. 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

react使用axios 上传文件_数据

解析二

对于如何在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