ReactNative实现图片上传功能的示例代码

最近在学习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里怎么做，贴代码：

uploadImage(){
 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',

4、将创建好的FormData赋值给body

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React+ajax+java实现上传图片并预览功能

    React+ajax+java实现上传图片并预览功能

    之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图片到服务器,并且返回图片名字和图片在服务器的路径,然后在页面显示文件名字和图片. 源码:ajax上传预览 React中: import React from 'react'; import Http from './http' const URL = 'http://localhost:8080/f

  • 基于Node的React图片上传组件实现实例代码

    基于Node的React图片上传组件实现实例代码

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可. import React, { Component } from 'react' import Upload from '../../components/FormControls/Upload/' /

  • React中上传图片到七牛的示例代码

    之前有写过类似的一篇文章,有位同学突然找来解惑,发现自己采用了另外的一个方法,这里也分享下,希望对使用reactjs的同学有帮助. 逻辑思路是这样子的,在componentDidMount中实现更新dom的操作,异步加载需要的资源文件,然后在加载完后实现qiniu的初始化操作.这里就不需要在webpack或者其他打包工具中去引入qiniu的包文件,导致打完包的文件过大了. 我这里使用了nodejs的库scriptjs, const $S = require('scriptjs'); 可以实现异步

  • React+react-dropzone+node.js实现图片上传的示例代码

    React+react-dropzone+node.js实现图片上传的示例代码

    本文将会用typescript+react+react-dropzone+express.js实现前后端上传图片.当然是用typescript需要提前下载相应的模块,在这里就不依依介绍了. 第一步,配置tsconfig.js "compilerOptions": { "outDir": "./public/", "sourceMap": true, "noImplicitAny": true, "

  • react native实现往服务器上传网络图片的实例

    如下所示: let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现图片上传 * @param {string} url 接口地址 * @param {JSON} params body的请求参数 * @return 返回Promise */ function uploadImage(url,params){ return new Promise(fun

  • ReactNative实现图片上传功能的示例代码

    最近在学习ReactNative,ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App,今天就学习一下ReactNative实现图片上传功能 在查看ReactNative的官方文档的时候,你会发现其实Fackbook是没有提供图片上传功能的. 如果我们的项目里需要使用图片上传(用js 实现图片上传),那我们有没有什么办法呢? 通过搜索React-native的github, 会发现里面有这么一篇文章:https://github

  • asp.net core集成CKEditor实现图片上传功能的示例代码

    asp.net core集成CKEditor实现图片上传功能的示例代码

    背景 本文为大家分享了asp.net core 如何集成CKEditor ,并实现图片上传功能的具体方法,供大家参考,具体内容如下. 准备工作 1.visual studio 2019 开发环境 2.net core 2.0 及以上版本 实现方法 1.新建asp.net core web项目 2.下载CKEditor 这里我们新建了一个系统自带的样本项目,去 CKEditor官网下载一个版本,解压后拷贝大wwwroot中 3.增加图片上传控制器 @using CompanyName.Projec

  • Golang实现图片上传功能的示例代码

    目录 1.前端代码 2.JS代码 3.后端代码 该代码为使用beego实现前后端图片上传.话不多说,直接上代码. 1.前端代码 html代码: <div class="col-5 f-l text text-r">背景图(必须):</div> <div class="img-box"> <label> <span class="copy-btn Hui-iconfont"></s

  • PHP实现多张图片上传功能的示例代码

    PHP实现多张图片上传功能的示例代码

    首先要知道这个函数 move_uploaded_file(); 接下来是我们的input框,和我们的html页面 这里我们是增加的input框我们也可以写写一个属性    multiple="multiple"   这样就可以ctrl多选图片了 <html> <head><title>多个文件上传表单</title></head> <body> <style> form{ margin: 20px; p

  • Java SpringBoot实现文件上传功能的示例代码

    Java SpringBoot实现文件上传功能的示例代码

    测试代码 pom.xml: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org

  • ie8本地图片上传预览示例代码

    复制代码 代码如下: imgpath= getRealPath(fileId): document.getElementById("divSBTP").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ imgpath + "\")";//使用滤镜效果 func

  • js纯前端实现腾讯cos文件上传功能的示例代码

    前言 在前端开发中文件上传是经常会遇到的,并且多数情况会使用第三方平台来存储文件,腾讯云cos是我们常用的.本篇文章就是带我从前端的角度实现腾讯云COS存储.本文参考了腾讯云COS开发文档 JavaScript SDK 步骤 安装腾讯云COS上传所需的sdk 下载cos-js-sdk-v5.min.js并引入index.html 监听文件上传组件 //监听文件变化 document.getElementById('file').onchange = function() { let file =

  • ThinkPHP框架实现FTP图片上传功能示例

    ThinkPHP框架实现FTP图片上传功能示例

    本文实例讲述了ThinkPHP框架实现FTP图片上传功能.分享给大家供大家参考,具体如下: 背景: 图片上传功能应该是个极为普遍的,在此参考了ThinkPHP 框架中的集成方法整理了一下FTP图片的上传功能,这样方便在后台操作时,把有关的图片直接上传到线上的图片服务器,避免大流量访问的图片加载缓慢,降低网站的访问压力,不合理之处,敬请指摘... 操作: 1.前端设计 这里主要为了测试功能的实现,使用最简单的设计,既方便参考又有利于后期的功能扩展.如下附upload.html主要代码,着重注意红框

  • Laravel+Layer实现图片上传功能(整理篇)

    Laravel+Layer实现图片上传功能(整理篇)

    ♩ 背景 昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能 但是在 ajax(POST) 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在 最后将核心代码摘出,放到 Larvel 框架以外运行,发现代码是没有问题的,因为对 Laravel 框架接触的太浅,忽视了 CSRF 的限制 ⒉ 解决方案 一般在表单提交时,都会存放一个隐藏的输入框 <input type="hidden" name="_token" valu

  • Spring Boot项目中实现文件上传功能的示例

    Spring Boot项目中实现文件上传功能的示例

    在实际项目中,文件上传是很多项目必不可少的一个功能.那么在 Spring Boot 项目中又是如何来实现文件上传功能的呢?一般来说,上传的文件可以保存到项目根目录下的某一文件夹中,但这样做显然是不太合适的.因此我们选择将文件上传到专门的文件服务器中.很多云计算厂商都提供文件存储服务.这里我选择的是阿里云的对象存储(OSS). 一.配置OSS 1. 导入SDK 首先,你需要注册阿里云的账号并开通对象存储服务.在准备工作完成之后,需要导入 JAVA 版本的 SDK,这里使用 maven 进行导入 <

随机推荐