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之Partial Application学习
Jan 10 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
JavaScript实现多文件下载方法解析
Aug 07 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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
桌面中心(三)修改数据库
2006/10/09 PHP
PHP的中问验证码
2006/11/25 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
php实现等比例压缩图片
2018/07/26 PHP
JavaScript Prototype对象
2009/01/07 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
django 2.0更新的10条注意事项总结
2018/01/05 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
师范学院毕业生求职信范文
2013/12/26 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
护理见习报告范文
2014/11/03 职场文书
宾馆安全管理制度
2015/08/06 职场文书
早上好问候语大全
2015/11/10 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python
Java中的Kotlin 内部类原理
2022/06/16 Java/Android