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最新动画教程+iso光盘下载
Jan 22 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 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 session处理的定制
2009/03/16 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
Python中编写ORM框架的入门指引
2015/04/29 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Python实现的特征提取操作示例
2018/12/03 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python十进制转二进制的详解
2020/02/07 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
辩论赛主持词
2014/03/18 职场文书
个人培训自我鉴定
2014/03/28 职场文书
股权转让协议书
2014/12/07 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
Python基本知识点总结
2022/04/07 Python
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL