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里怎么做,贴代码:

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
'Content-Type':'multipart/form-data', 
  1. 将创建好的FormData赋值给body

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/498673.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

伪原创文章生成软件:自媒体文章写作好神器

自媒体的红利时代,许多人都纷纷参于其中,而文章写作是做自媒体的基本技能,但是随着技术的发展,如今,既使不会写作能力一样可以做起自媒体,方法就是利用伪原创文章生成软件来做内容的输出,其实伪…

PowerBI和Tableau之间该怎么选择?

最近经常看到朋友询问,最近想学习数据分析工具,但是PowerBI和Tableau之间不知道怎么选择? 其实可以从下面几个方面进行参考,Power BI和Tableau哪个更适合你? 共同点: Power BI和Tableau都是强大的数据分析和数据可…

Node爬虫:原理简介

在数字化时代,网络爬虫作为一种自动化收集和分析网络数据的技术,得到了广泛的应用。Node.js,以其异步I/O模型和事件驱动的特性,成为实现高效爬虫的理想选择。然而,爬虫在收集数据时,往往面临着诸如反爬虫机…

QML通过鼠标拖动的位置

当通过鼠标拖动Rectangle 的位置时,可以使用Qt Quick的MouseArea组件来实现 Rectangle {id: rectx:0;y:0width: 200; height: 100color: "lightblue"MouseArea {id: mouseAreaanchors.fill: parentdrag.target: rect//要拖动的项目的IDdrag.axis: Drag.XA…

设计模式 —— 设计原则

在软件开发中,为了提高软件系统的可维护性和可复用性,增加软件的可扩展性和灵活性,程序员要尽量根据6条原则来开发程序,从而提高软件开发效率、节约软件开发成本和维护成本。 开闭原则 对扩展开放,对修改关闭。在程序需…

【Pt】马灯贴图绘制过程 03-制作油渍、积尘效果

目录 效果 一、制作油渍效果 1.1 基本油渍 1.2 流淌的油渍痕迹 二、制作浮尘效果 三、制作积尘效果 效果 一、制作油渍效果 1.1 基本油渍 将上篇制作的“锈迹_深色”和“锈迹_浅色”两个文件夹再次合并为一个文件夹 这里就命名为“锈迹” 添加一个填充图层 设置Base …

【SpringBoot从入门到精通】01_SpringBoot概述

一、Spring与SpringBoot 1.1 Spring Spring 是一款目前主流的 Java EE 轻量级开源框架,是 Java 世界最为成功的框架之一。Spring 由“Spring 之父”Rod Johnson(罗宾约翰逊) 提出并创立,其目的是用于简化 Java 企业级应用的开发难度和开发周期。 广义…

Windows下安装使用Squirrel

引言 SQuirrel SQL Client是一个用Java写的数据库客户端,用JDBC统一数据库访问接口以后,可以通过一个统一的用户界面来操作MySQL PostgreSQL MSSQL Oracle等等任何支持JDBC访问的数据库。使用起来非常方便。而且,SQuirrel SQL Client还是一个典型的Swing程序。 如果您的工作…

基于单片机锂电池电量检测数码管显示系统设计

**单片机设计介绍,基于单片机锂电池电量检测数码管显示系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机锂电池电量检测数码管显示系统设计的主要目标是实时、准确地检测锂电池的电量,并…

LDL^H分解求逆矩阵与MATLAB仿真(Right-Looking)

通过分解将对称正定厄米特矩阵分解成下三角矩阵L和对角矩阵D来求其逆矩阵 目录 前言 一、LDL^H基本算法 二、LDL^H Right-Looking算法 三、D矩阵求逆 四、L矩阵求逆 五、A矩阵求逆 六、计算量分析 七、MATLAB仿真 八、参考资料 总结 前言 在线性代数中,LDL…

2-HDFS常用命令及上传下载流程

HDFS NameNode 安全模式(safemode) 当NameNode被重启的时候,自动进入安全模式 在安全模式中,NameNode首先会触发edits_inprogress文件的滚动。滚动完成之后,更新fsimage文件 更新完成之后,NameNode会将fsimage文件中的元数据加…

(免费分享)基于springboot,vue付费自习室系统带论文

在当今数字化时代,高效、便捷的管理系统成为了各行各业不可或缺的工具。特别是在教育服务领域,自习室作为学生和在职人员重要的学习场所,其预约和管理需求日益增长。为了满足这一市场需求,本文开发了这款基于微信小程序的付费自习…

DC-5靶机

一.环境搭建 1.下载地址 靶机下载地址:https://download.vulnhub.com/dc/DC-5.zip 2.虚拟机配置 切换nat模式,有问题全选重试和是,打到这了,我感觉这个配置我都不用写了,启动靶机如下图所示即可 二.开始渗透 1.信…

设计模式 - 简单工厂模式

文章目录 前言 大家好,今天给大家介绍一下23种常见设计模式中的一种 - 工厂模式 1 . 问题引入 请用C、Java、C#或 VB.NET任意一种面向对象语言实现一个计算器控制台程序,要求输入两个数和运算符 号,得到结果。 下面的代码实现默认认为两个操作数为Inte…

2. Java基本语法

文章目录 2. Java基本语法2.1 关键字保留字2.1.1 关键字2.1.2 保留字2.1.3 标识符2.1.4 Java中的名称命名规范 2.2 变量2.2.1 分类2.2.2 整型变量2.2.3 浮点型2.2.4 字符型 char2.2.5 Unicode编码2.2.6 UTF-82.2.7 boolean类型 2.3 基本数据类型转换2.3.1 自动类型转换2.2.2 强…

报错:torch.distributed.elastic.multiprocessing.errors.ChildFailedError:

错误: torch.distributed.elastic.multiprocessing.errors.ChildFailedError: 这个主要是torch的gpu版本和cuda不适配 我的nvcc -V是11.8 torch使用的: pip install torch2.0.1 torchvision0.15.2 torchaudio2.0.2 --index-url https://download.pyt…

Day47:WEB攻防-PHP应用文件上传函数缺陷条件竞争二次渲染黑白名单JS绕过

目录 文件上传与测试环境安装 1、前端 JS 2、.htaccess(apache独有的配置文件) 3、MIME类型 4、文件头判断 5、黑名单-过滤不严 6、黑名单-过滤不严 7、低版本GET-%00截断 8、低版本POST-%00截断 9、黑名单-过滤不严 10、逻辑不严-条件竞争 11、二次渲染 12、函数…

Leetcoder Day43| 单调栈2

503.下一个更大元素II 给定一个循环数组(最后一个元素的下一个元素是数组的第一个元素),输出每个元素的下一个更大元素。数字 x 的下一个更大的元素是按数组遍历顺序,这个数字之后的第一个比它更大的数,这意味着你应该…

2024最新Guitar Pro 8.1中文版永久许可证激活

Guitar Pro是一款非常受欢迎的音乐制作软件,它可以帮助用户创建和编辑各种音乐曲谱。从其诞生以来就送专门为了编写吉他谱而研发迭代的。 尽管这款产品可能已经成为全球最受欢迎的吉他打谱软件,在编写吉他六线谱和乐队总谱中始终处于行业领先地位&#x…

大话设计模式之原型模式

原型模式(Prototype Pattern)是一种创建型设计模式,它用于创建对象的复制,同时又能保持对象的封装。原型模式通过复制现有对象的方式来创建新的对象,而无需知道具体创建过程的细节。 在原型模式中,通常会有…
最新文章