ReactNative实现图片上传功能(兼容安卓和ios)

最近在学习ReactNative,ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App,今天就学习一下ReactNative实现图片上传功能

在查看ReactNative的官方文档的时候,你会发现其实Fackbook是没有提供图片上传功能的。

如果我们的项目里需要使用图片上传(用js 实现图片上传),那我们有没有什么办法呢?

通过搜索React-native的github, 会发现里面有这么一篇文章:https://github.com/facebook/react-native/issues/5308
解决方案:

采用FormData来实现,FormData 的API参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单".

那么我们就来看看在RN里怎么做,贴代码:

js 复制代码
function uploadImage(uri) { // 参数为图片本地路径
  let formData = new FormData();
  let file = {uri: uri, type: 'multipart/form-data', name: 'a.jpg'};

  formData.append('images', file);

  fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    body: formData,
  })
    .then(response => response.text())
    .then(responseData => {
      console.log('responseData', responseData);
    })
    .catch(error => {
      console.error('error', error);
    });
}
  1. 首先我们new了一个FormData
  2. 创建一个file对象,uri是什么?如下示例:
    Android图片路径示例: file:///storage/emulated/0/Pictures/eb645893-4c00-44a3-a9b4-a2116e955f7c.jpg
    ios图片路径示例: /Users/ashleydw/Library/Developer/CoreSimulator/Devices/23EE88D0-6E91-43AD-A3B6-06F87698C5A8/data/Containers/Data/Application/A73E68D3-7424-4301-9934-AD0F8251C1EB/tmp/7803DA8A-0E40-4FCB-A593-884805878172.jpg
  3. 设置header
js 复制代码
'Content-Type':'multipart/form-data', 
  1. 将创建好的FormData赋值给body

这样我们就完成了图片上传的功能。

各位也可以参考我这篇文章做个拍照功能,拍照完成后得到图片的url本地地址,然后结合这篇文章做个拍照上传服务器功能

也可以参考这篇文章将图片剪切后得到url本地地址,然后剪切完成后上传至服务器

相关推荐
Tlaster22 分钟前
使用KMP实现原生UI + Compose混合的社交客户端
android·ios·开源
袁煦丞 cpolar内网穿透实验室1 小时前
安卓旧机变服务器,KSWEB部署Typecho博客并实现远程访问:cpolar内网穿透实验室第645个成功挑战
android·运维·服务器·远程工作·内网穿透·cpolar
游戏开发爱好者81 小时前
iOS 26 App 查看电池寿命技巧,多工具组合实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
用户41659673693551 小时前
基于Jetpack Compose 实现列表嵌套滚动联动机制 (完整源码解析)
android
林栩link1 小时前
【车载Android】使用自定义插件实现多语言自动化适配
android
_pengliang4 小时前
React Native 使用 react-native-credentials-manager 接入谷歌登录教程
javascript·react native·react.js
linghugoogle4 小时前
基于 Metal 的 iOS 全景视频播放器
ios
消失的旧时光-19436 小时前
Flutter 响应式 + Clean Architecture / MVU 模式 实战指南
android·flutter·架构
库奇噜啦呼6 小时前
【iOS】自动引用计数(一)
macos·ios·cocoa
404未精通的狗6 小时前
(数据结构)栈和队列
android·数据结构