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 相关文章推荐
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
使用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 array_filter除去数组中的空字符元素
2020/06/21 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
网上抓的一个特效
2007/05/11 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Python扩展内置类型详解
2018/03/26 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
vivo智能手机官方商城:vivo
2016/09/22 全球购物
求职信写作要突出重点
2014/01/01 职场文书
男方父母证婚词
2014/01/12 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
思品教学工作总结
2015/08/10 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python