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与asp.net(c#)互相调用方法
Dec 13 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
vue源码nextTick使用及原理解析
Aug 13 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中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
PHP 实现缩略图
2021/03/09 PHP
Javascript !!的作用
2008/12/04 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
python实现淘宝秒杀脚本
2020/06/23 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
网络工程师的自我评价
2013/10/02 职场文书
中学生自我评价范文
2014/02/08 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书