native react 图片上传

2018-07-23 23:41:50 weixin_33929309 阅读数 47
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

RN项目需要用到上传图片功能,整理一下做个记录。

插件选择是react-native-image-picker,还挺好用的,不过需要分ios和android不同平台去配置.

可以看看之前的文章https://segmentfault.com/a/11...

现在给出git上的react-native-image-picker地址

当你通过react-native-image-picker得到本地图片信息时执行以下代码:

处理单张图片

 let formData = new FormData();//如果需要上传多张图片,需要遍历数组,把图片的路径数组放入formData中
 let file = {uri: response.uri, type: 'multipart/form-data', name: 'image.png'};   //这里的key(uri和type和name)不能改变,
 formData.append("files",file);   //这里的files就是后台需要的key
 
 

多张图片处理

let formData = new FormData();

for(var i = 0;i<imgAry.length;i++){
    let file = {uri: imgAry[i], type: 'multipart/form-data', name: 'image.png'};   
    formData.append("files",file);  
}


上传

uploadURL上传图片的地址

 fetch(uploadURL,{
            method:'POST',
            headers:{
                'Content-Type':'multipart/form-data',
            },
            body:formData,
        })
            .then((response) => response.json())
            .then((responseData)=>{
                 let  source = ret.data.images[0].oUrl
                     console.log(source)  //得到的uri(http格式)拿到后进行操作吧
              
            })
            .catch((error)=>{console.error('error',error)});

下面是我自己应用的例子

引入模块和上传地址
clipboard.png

应用

clipboard.png

2016-09-06 09:13:43 hsbirenjie 阅读数 23552
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

在查看ReactNative的官方文档的时候,你会发现其实Fackbook是没有提供图片上传功能的。

如果我们的项目里需要使用图片上传(用JS 实现图片上传),那我们有没有什么办法呢?

通过搜索react-native的github, 会发现里面有这么一篇文章:https://github.com/facebook/react-native/issues/5308


解决方案:

采用FormData来实现,FormData 的API参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单".

那么我们就来看看在RN里怎么做,贴代码:

  uploadImage(){
    let formData = new FormData();
    let file = {uri: uri, type: 'multipart/form-data', name: 'a.jpg'};

    formData.append("images",file);

    fetch(url,{
      method:'POST',
      headers:{
      	'Content-Type':'multipart/form-data',
      },
      body:formData,
    })
    .then((response) => response.text() )
    .then((responseData)=>{

      console.log('responseData',responseData);
    })
    .catch((error)=>{console.error('error',error)});

  }
}

1、首先我们new了一个FormData

2、创建一个file对象,uri是什么?如下示例:

android:  file:///storage/emulated/0/Pictures/eb645893-4c00-44a3-a9b4-a2116e955f7c.jpg
ios:         /Users/ashleydw/Library/Developer/CoreSimulator/Devices/23EE88D0-6E91-43AD-A3B6-06F87698C5A8/data/Containers/Data/Application/A73E68D3-7424-4301-9934-AD0F8251C1EB/tmp/7803DA8A-0E40-4FCB-A593-884805878172.jpg

3、设置header 

'Content-Type':'multipart/form-data',

4、将创建好的FormData赋值给body


这样我们就完成了图片上传的功能。






2017-05-07 19:30:41 withings 阅读数 14563
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

普通网络请求参数是JSON对象
图片上传的请求参数使用的是formData对象

使用fetch上传图片代码封装如下:

const common_url = 'http://192.168.1.1:8080/';  //服务器地址
const 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:'1',   //用户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 => { 
    	console.log('uploadImage', err.message);
         //请求失败
    })

注意:由于后台服务器配置的不同,
let file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'}中的type也可能是multipart/form-data
formData.append("file", file)中的的file字段也可能是images

2017-06-27 19:54:25 sinat_17775997 阅读数 13549
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

https://github.com/react-community/react-native-image-picker

npm install react-native-image-picker@latest --save
react-native link

具体代码参考demo里面的APP.js


QQ20170621-162902.gif

可以设置直接访问相机、相册,也可以弹出选择框进行选择


87273454-3112-445A-9575-FD62A21A43D3.png

选择图片后的图片信息


F2434686-77A5-43F2-948D-35375BF4FEF4.png

处理上传数据,单张图片

    let formData = new FormData();//如果需要上传多张图片,需要遍历数组,把图片的路径数组放入formData中
    let file = {uri: response.uri, type: 'multipart/form-data', name: 'image.png'};   //这里的key(uri和typename)不能改变,
    formData.append("files",file);   //这里的files就是后台需要的key

多张图片上传

 let formData = new FormData();
    for(var i = 0;i<imgAry.length;i++){
        let file = {uri: imgAry[i], type: 'multipart/form-data', name: 'image.png'};   
        formData.append("files",file);  
    }

上传

 fetch(uploadURL,{
        method:'POST',
        headers:{
            'Content-Type':'multipart/form-data',
        },
        body:formData,
    })
        .then((response) => response.text() )
        .then((responseData)=>{

            console.log('responseData',responseData);
        })
        .catch((error)=>{console.error('error',error)});
2019-10-31 16:53:19 qq_42023279 阅读数 208
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

关于react-native上传图片(单张上传)

若需要选择,裁剪,压缩等功能可以使用 react-native-image-crop-picker

github地址

安装

npm install react-native-image-picker

链接本地

react-native link react-native-image-picker

配置环境

安卓环境

1,在android/settings.gradle文件中添加如下代码:
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')
2,在android/app/build.gradle文件的dependencies中添加如下代码:
compile project(':react-native-image-picker')
3,在AndroidManifest.xml文件中添加权限:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
4,最后在MainApplication.Java文件中添加如下代码:
import com.imagepicker.ImagePickerPackage;
new ImagePickerPackage()

ios环境

打开xcode,在info.plist中配置权限
<plist version="1.0">
  <dict>
    ...
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your camera</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your microphone (for videos)</string>
  </dict>
</plist>

使用

import ImagePicker from 'react-native-image-picker';

示例代码

//选择图片
  selectPhotoTapped() { // 点击方法,自定义
    const options = {
      title: '从相册选择或拍摄',
      cancelButtonTitle: '取消',
      takePhotoButtonTitle: '拍摄',
      chooseFromLibraryButtonTitle: '选择照片',
      // customButtons: [
      //   {name: 'fb', title: 'Choose Photo from Facebook'},
      // ],
      cameraType: 'back',
      mediaType: 'photo',
      videoQuality: 'high',
      durationLimit: 10,
      maxWidth: 300,
      maxHeight: 300,
      quality: 0.8,
      angle: 0,
      allowsEditing: false,
      noData: false,
      storageOptions: {
        skipBackup: true
      }
    };

    ImagePicker.showImagePicker(options, (response) => {
      if (!response.error) {
        if (response.didCancel) {
          return;
        }
        const source = response;
        this.base64 = response.data;
        //注意,iOS 获取的图片地址要替换掉"file://",这是后面上传遇到的坑
        source.uri = Platform.OS == 'ios' ? response.uri.replace('file://', '') : response.uri;
        let file = {uri: source.uri, type: 'multipart/form-data', name: 'image.png'};
        let formData = new FormData();
        formData.append('avatar', file);
        formData.append('token', this.props.user_token);
        // console.log(formData)
        this.props.changeUserHead(formData)

      }

    });
  }