react native实现往服务器上传网络图片的实例


Posted in Javascript onAugust 07, 2017

如下所示:

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

普通网络请求参数是JSON对象

图片上传的请求参数使用的是formData对象

总结:

React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRequest 是一个设计粗糙的 API,不符合职责分离的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise 友好。而Fetch 的出现就是为了解决 XHR 的问题,所以react Native官方推荐使用Fetch API。

fetch请求示例如下:

return fetch('http://facebook.github.io/react-native/movies.json')
  .then((response) => response.json())
  .then((responseJson) => {
   return responseJson.movies;
  })
  .catch((error) => {
   console.error(error);
  });

使用Promise封装fetch请求

let common_url = 'http://192.168.1.1:8080/'; //服务器地址
let token = '';  
/**
 * @param {string} url 接口地址
 * @param {string} method 请求方法:GET、POST,只能大写
 * @param {JSON} [params=''] body的请求参数,默认为空
 * @return 返回Promise
 */
function fetchRequest(url, method, params = ''){
  let header = {
    "Content-Type": "application/json;charset=UTF-8",
    "accesstoken":token //用户登陆后返回的token,某些涉及用户数据的接口需要在header中加上token
  };
  console.log('request url:',url,params); //打印请求参数
  if(params == ''){  //如果网络请求中没有参数
    return new Promise(function (resolve, reject) {
      fetch(common_url + url, {
        method: method,
        headers: header
      }).then((response) => response.json())
        .then((responseData) => {
          console.log('res:',url,responseData); //网络请求成功返回的数据
          resolve(responseData);
        })
        .catch( (err) => {
          console.log('err:',url, err);   //网络请求失败返回的数据    
          reject(err);
        });
    });
  }else{  //如果网络请求中带有参数
    return new Promise(function (resolve, reject) {
      fetch(common_url + url, {
        method: method,
        headers: header,
        body:JSON.stringify(params)  //body参数,通常需要转换成字符串后服务器才能解析
      }).then((response) => response.json())
        .then((responseData) => {
          console.log('res:',url, responseData);  //网络请求成功返回的数据
          resolve(responseData);
        })
        .catch( (err) => {
          console.log('err:',url, err);  //网络请求失败返回的数据 
          reject(err);
        });
    });
  }
}

使用fetch请求,如果服务器返回的中文出现了乱码,则可以在服务器端设置如下代码解决:

produces="text/html;charset=UTF-8"

fetchRequest使用如下:
GET请求:
fetchRequest('app/book','GET')
  .then( res=>{
    //请求成功
    if(res.header.statusCode == 'success'){
      //这里设定服务器返回的header中statusCode为success时数据返回成功

    }else{
      //服务器返回异常,设定服务器返回的异常信息保存在 header.msgArray[0].desc
      console.log(res.header.msgArray[0].desc);
    }
  }).catch( err=>{ 
    //请求失败
  })

POST请求:

let params = {
  username:'admin',
  password:'123456'
}
fetchRequest('app/signin','POST',params)
  .then( res=>{
    //请求成功
    if(res.header.statusCode == 'success'){
      //这里设定服务器返回的header中statusCode为success时数据返回成功

    }else{
      //服务器返回异常,设定服务器返回的异常信息保存在 header.msgArray[0].desc 
      console.log(res.header.msgArray[0].desc);
    }
  }).catch( err=>{ 
    //请求失败
  })

fetch超时处理

由于原生的Fetch API 并不支持timeout属性,如果项目中需要控制fetch请求的超时时间,可以对fetch请求进一步封装实现timeout功能,代码如下:

fetchRequest超时处理封装

/**
 * 让fetch也可以timeout
 * timeout不是请求连接超时的含义,它表示请求的response时间,包括请求的连接、服务器处理及服务器响应回来的时间
 * fetch的timeout即使超时发生了,本次请求也不会被abort丢弃掉,它在后台仍然会发送到服务器端,只是本次请求的响应内容被丢弃而已
 * @param {Promise} fetch_promise  fetch请求返回的Promise
 * @param {number} [timeout=10000]  单位:毫秒,这里设置默认超时时间为10秒
 * @return 返回Promise
 */
function timeout_fetch(fetch_promise,timeout = 10000) {
  let timeout_fn = null; 

  //这是一个可以被reject的promise
  let timeout_promise = new Promise(function(resolve, reject) {
    timeout_fn = function() {
      reject('timeout promise');
    };
  });

  //这里使用Promise.race,以最快 resolve 或 reject 的结果来传入后续绑定的回调
  let abortable_promise = Promise.race([
    fetch_promise,
    timeout_promise
  ]);

  setTimeout(function() {
    timeout_fn();
  }, timeout);

  return abortable_promise ;
}

let common_url = 'http://192.168.1.1:8080/'; //服务器地址
let token = '';  
/**
 * @param {string} url 接口地址
 * @param {string} method 请求方法:GET、POST,只能大写
 * @param {JSON} [params=''] body的请求参数,默认为空
 * @return 返回Promise
 */
function fetchRequest(url, method, params = ''){
  let header = {
    "Content-Type": "application/json;charset=UTF-8",
    "accesstoken":token //用户登陆后返回的token,某些涉及用户数据的接口需要在header中加上token
  };
  console.log('request url:',url,params); //打印请求参数
  if(params == ''){  //如果网络请求中没有参数
    return new Promise(function (resolve, reject) {
      timeout_fetch(fetch(common_url + url, {
        method: method,
        headers: header
      })).then((response) => response.json())
        .then((responseData) => {
          console.log('res:',url,responseData); //网络请求成功返回的数据
          resolve(responseData);
        })
        .catch( (err) => {
          console.log('err:',url, err);   //网络请求失败返回的数据    
          reject(err);
        });
    });
  }else{  //如果网络请求中带有参数
    return new Promise(function (resolve, reject) {
      timeout_fetch(fetch(common_url + url, {
        method: method,
        headers: header,
        body:JSON.stringify(params)  //body参数,通常需要转换成字符串后服务器才能解析
      })).then((response) => response.json())
        .then((responseData) => {
          console.log('res:',url, responseData);  //网络请求成功返回的数据
          resolve(responseData);
        })
        .catch( (err) => {
          console.log('err:',url, err);  //网络请求失败返回的数据 
          reject(err);
        });
    });
  }
}

以上这篇react native实现往服务器上传网络图片的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
详解用node编写自己的cli工具
May 23 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 #Javascript
ES6新增的math,Number方法
Aug 06 #Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 #Javascript
JS解析url查询参数的简单代码
Aug 06 #Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 #Javascript
JS中定位 position 的使用实例代码
Aug 06 #Javascript
Node.js 基础教程之全局对象
Aug 06 #Javascript
You might like
PHP查询网站的PR值
2013/10/30 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
利用js对象弹出一个层
2008/03/26 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python实现的检测网站挂马程序
2014/11/30 Python
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Python性能提升之延迟初始化
2016/12/04 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Pytorch释放显存占用方式
2020/01/13 Python
Django视图、传参和forms验证操作
2020/07/15 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
静态成员和非静态成员的区别
2012/05/12 面试题
军训 自我鉴定
2014/02/03 职场文书
十八届三中全会感言
2014/03/10 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
Python find()、rfind()方法及作用
2022/12/24 Python