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 相关文章推荐
js chrome浏览器判断代码
Mar 28 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
javascript插入样式实现代码
Feb 22 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
你准备好迎接vue3.0了吗
Apr 28 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
javascript实现下拉菜单效果
Feb 09 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
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
python实现rsa加密实例详解
2017/07/19 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
新闻记者实习自我鉴定
2013/09/19 职场文书
专科毕业生求职简历的自我评价
2013/10/12 职场文书
工程项目经理岗位职责
2013/12/15 职场文书
优秀教师先进事迹
2014/01/22 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
汽车广告策划方案
2014/05/31 职场文书
公民授权委托书范本
2014/09/17 职场文书
银行转正自我鉴定
2014/09/29 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
国际贸易实训报告
2014/11/05 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书