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
这样我们就完成了图片上传的功能。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
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
-
React+ajax+java实现上传图片并预览功能
之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图片到服务器,并且返回图片名字和图片在服务器的路径,然后在页面显示文件名字和图片. 源码:ajax上传预览 React中: import React from 'react'; import Http from './http' const URL = 'http://localhost:8080/f
-
React+react-dropzone+node.js实现图片上传的示例代码
本文将会用typescript+react+react-dropzone+express.js实现前后端上传图片.当然是用typescript需要提前下载相应的模块,在这里就不依依介绍了. 第一步,配置tsconfig.js "compilerOptions": { "outDir": "./public/", "sourceMap": true, "noImplicitAny": true, "
-
React中上传图片到七牛的示例代码
之前有写过类似的一篇文章,有位同学突然找来解惑,发现自己采用了另外的一个方法,这里也分享下,希望对使用reactjs的同学有帮助. 逻辑思路是这样子的,在componentDidMount中实现更新dom的操作,异步加载需要的资源文件,然后在加载完后实现qiniu的初始化操作.这里就不需要在webpack或者其他打包工具中去引入qiniu的包文件,导致打完包的文件过大了. 我这里使用了nodejs的库scriptjs, const $S = require('scriptjs'); 可以实现异步
-
基于Node的React图片上传组件实现实例代码
写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可. import React, { Component } from 'react' import Upload from '../../components/FormControls/Upload/' /
-
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 ,并实现图片上传功能的具体方法,供大家参考,具体内容如下. 准备工作 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实现多张图片上传功能的示例代码
首先要知道这个函数 move_uploaded_file(); 接下来是我们的input框,和我们的html页面 这里我们是增加的input框我们也可以写写一个属性 multiple="multiple" 这样就可以ctrl多选图片了 <html> <head><title>多个文件上传表单</title></head> <body> <style> form{ margin: 20px; p
-
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图片的上传功能,这样方便在后台操作时,把有关的图片直接上传到线上的图片服务器,避免大流量访问的图片加载缓慢,降低网站的访问压力,不合理之处,敬请指摘... 操作: 1.前端设计 这里主要为了测试功能的实现,使用最简单的设计,既方便参考又有利于后期的功能扩展.如下附upload.html主要代码,着重注意红框
-
Laravel+Layer实现图片上传功能(整理篇)
♩ 背景 昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能 但是在 ajax(POST) 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在 最后将核心代码摘出,放到 Larvel 框架以外运行,发现代码是没有问题的,因为对 Laravel 框架接触的太浅,忽视了 CSRF 的限制 ⒉ 解决方案 一般在表单提交时,都会存放一个隐藏的输入框 <input type="hidden" name="_token" valu
-
Spring Boot项目中实现文件上传功能的示例
在实际项目中,文件上传是很多项目必不可少的一个功能.那么在 Spring Boot 项目中又是如何来实现文件上传功能的呢?一般来说,上传的文件可以保存到项目根目录下的某一文件夹中,但这样做显然是不太合适的.因此我们选择将文件上传到专门的文件服务器中.很多云计算厂商都提供文件存储服务.这里我选择的是阿里云的对象存储(OSS). 一.配置OSS 1. 导入SDK 首先,你需要注册阿里云的账号并开通对象存储服务.在准备工作完成之后,需要导入 JAVA 版本的 SDK,这里使用 maven 进行导入 <
随机推荐
- ASP超级链接和HTML函数正则表达式 修正版
- 浅谈Scala的Class、Object和Apply()方法
- jQuery EasyUI右键菜单实现关闭标签/选项卡
- BootStrap Table对前台页面表格的支持实例讲解
- 上海居住证办理 续办上海居住证全攻略
- AR系列路由器对网络病毒的应对办法
- perl常问题集合之一
- Python实现过滤单个Android程序日志脚本分享
- asp.net中使用cookie与md5加密实现记住密码功能的实现代码
- thinkPHP2.1自定义标签库的导入方法详解
- linux进程监控shell脚本代码
- gd库图片下载类实现下载网页所有图片的php代码
- Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
- php 用sock技术发送邮件的函数
- javascript支持IE和firefox(FF)的渐变透明效果
- 利用WSH里的MapNetworkDrive方法脚本蠕虫的传播方式
- jquery ui dialog里调用datepicker的问题
- 北京奥运会倒计时代码
- Zabbix添加Node.js监控的方法
- js图片翻书效果代码分享