React Native使用fetch实现图片上传的示例代码


Posted in Javascript onMarch 07, 2018

本文介绍了React Native使用fetch实现图片上传的示例代码,分享给大家,具体如下:

普通网络请求参数是JSON对象

图片上传的请求参数使用的是formData对象

使用fetch上传图片代码封装如下:

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(function (resolve, reject) {
    let formData = new FormData();
    for (var key in params){
      formData.append(key, params[key]);
    }
    let file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'};
    formData.append("file", file);
    fetch(common_url + url, {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data;charset=utf-8',
        "x-access-token": token,
      },
      body: formData,
    }).then((response) => response.json())
      .then((responseData)=> {
        console.log('uploadImage', responseData);
        resolve(responseData);
      })
      .catch((err)=> {
        console.log('err', err);
        reject(err);
      });
  });
}

使用方法

let params = {
  userId:'abc12345',  //用户id
  path:'file:///storage/emulated/0/Pictures/image.jpg'  //本地文件地址
}
uploadImage('app/uploadFile',params )
  .then( res=>{
    //请求成功
    if(res.header.statusCode == 'success'){
      //这里设定服务器返回的header中statusCode为success时数据返回成功
      upLoadImgUrl = res.body.imgurl; //服务器返回的地址
    }else{
       //服务器返回异常,设定服务器返回的异常信息保存在 header.msgArray[0].desc
      console.log(res.header.msgArray[0].desc);
    }
  }).catch( err=>{ 
     //请求失败
  })

注意:由于后台服务器配置的不同,
let file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'}中的type也可能是multipart/form-data
formData.append("file", file)中的的file字段也可能是images

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 #Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 #Javascript
关于Vue的路由权限管理的示例代码
Mar 06 #Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 #Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 #Javascript
解决vue build打包之后首页白屏的问题
Mar 06 #Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 #Javascript
You might like
php获取bing每日壁纸示例分享
2014/02/25 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python Django框架实现自定义表单提交
2016/03/25 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
python在文本开头插入一行的实例
2018/05/02 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python 实现字符串下标的输出功能
2020/02/13 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
介绍一下write命令
2014/08/10 面试题
中国文明网签名寄语
2014/01/18 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
探亲假请假条
2014/04/11 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书