美文网首页
react-native-syan-image-picker 上

react-native-syan-image-picker 上

作者: zhang錦標 | 来源:发表于2020-02-26 16:25 被阅读0次

最近项目开发中遇到需要同时上传多张图片的需求,一番查找使用 react-native-syan-image-picker 组件

1.react-native: "0.60.5"
2.react-native-syan-image-picker : "^0.4.6"

一、安装 react-native-syan-image-picker

npm install react-native-syan-image-picker --save 
yarn add react-native-syan-image-picker 

因为react-native 0.60 版本起会自动 Link 所以这里直接跳过Link步骤;如果自动Link出现问题则需要手动Link

1.1 拍照前动态获取权限
获取权限前需配置 AndroidManifest.xml 添加以下权限:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />

获取权限代码

requestPermission = async () => {
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
                {
                    title: '申请读写手机存储权限',
                    message: '获取拍照权限', 
                    buttonNeutral: '稍后',
                    buttonNegative: '拒绝',
                    buttonPositive: '允许',
                },
            );
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                console.log('现在你获得摄像头权限了');
            } else {
                console.log('用户拒绝获得摄像头权限');
            }
        } catch (err) {
            console.warn(err); //错误
        }
    };

做好以上准备就可以撸核心代码了

二 、方法调用

Callback 回调形式需调用 showImagePicker 方法:

import SyanImagePicker from 'react-native-syan-image-picker';

SyanImagePicker.showImagePicker(options, (err, selectedPhotos) => {

 if (err) { 
   // 取消选择 
   return;

 }

 // 选择成功,渲染图片

 // ...

})

非回调形式则使用 asyncShowImagePicker 方法:

import SyanImagePicker from 'react-native-syan-image-picker';

// promise-then

SYImagePicker.asyncShowImagePicker(options)

  .then(photos => {

    // 选择成功

  })

  .catch(err => {

    // 取消选择,err.message为"取消"

  });

// async/await

handleSelectPhoto = async () => { 
  try {

    const photos = await SYImagePicker.asyncShowImagePicker(options);

    // 选择成功

  } catch (err) {

    // 取消选择,err.message为"取消"

  }

}

任选一种即可,以下为ReactNative代码示例


//选择图片
Introduce() {
        const options = {
            imageCount: 10,          // 最大选择图片数目,默认6
            isCamera: true,         // 是否允许用户在内部拍照,默认true
            isCrop: false,          // 是否允许裁剪,默认false
            CropW: ~~(width * 0.6), // 裁剪宽度,默认屏幕宽度60%
            CropH: ~~(width * 0.6), // 裁剪高度,默认屏幕宽度60%
            isGif: false,           // 是否允许选择GIF,默认false,暂无回调GIF数据
            showCropCircle: false,  // 是否显示圆形裁剪区域,默认false
            showCropFrame: true,    // 是否显示裁剪区域,默认true
            showCropGrid: false     // 是否隐藏裁剪区域网格,默认false
        }
        this.requestPermission()
        SYImagePicker.asyncShowImagePicker(options)
            .then(photos => {  
                //photos 返回实例
  // [{
                //     "height": "540",
                //     "original_uri": "file:///storage/emulated/0/Pictures/Screenshots/Screenshot_2020-01-19-09-23-47.png",
                //     "size": "88704",
                //     "type": "image",
                //     "uri": "file:///storage/emulated/0/Android/data/com.jzpfsc/files/Pictures/IMG_20200226_16044036.png",
                //     "width": "540"
                // }, {
                //     "height": "540",
                //     "original_uri": "file:///storage/emulated/0/Pictures/Screenshots/Screenshot_2020-01-19-09-18-34.png",
                //     "size": "119783",
                //     "type": "image",
                //     "uri": "file:///storage/emulated/0/Android/data/com.jzpfsc/files/Pictures/IMG_20200226_160441.png",
                //     "width": "540"
                // }]
                // 图片上传
                return uploadImages(photos)
                .then((response) => response.json())
                .then((responseData) => {
                    console.log(responseData.msg)
                })
                .catch((err) => {
                    console.log('err', err); 
                });
      // 图片上传end
            })
            .catch(err => {
                // 取消选择,err.message为"取消"
                console.log('失败', err)
            })
    }

采用fetch上传

uploadImages(Files){
    var formData = new FormData();
    Files.map((item) => {
        formData.append('image[]', {
            uri: item.original_uri,
            name: (new Date().valueOf()) + '.jpg',
            type: 'image/jpeg'
        });
    })
    var url = 'http://192.168.1.200:8033/api/wxapi/allupload' 
    return  fetch(url, {
        method: 'POST',
        body: formData,
    })  
} 

后端代码(以thinkphp为例)

 public function allupload()
    {
        header('Access-Control-Allow-Origin: *'); //允许跨域
        $arrList = ["msg" => "上传成功", "err_code" => 200, "ImageList" => []]; //图片上传成功信息
        $fileHost = request()->domain(); //当前域名
        $files = request()->file('image'); //获取Imags文件流
        foreach ($files as $file) {
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads'); //移动到public/uploads 文件夹
            if ($info) {
                // 成功上传后 获取上传信息 
                $fileName = $info->getSaveName(); //获取文件名称
                array_push($arrList['ImageList'], $fileHost . '/public/uploads/' . $fileName); //返回对应信息;
            } else {
                // 上传失败获取错误信息
                return json_encode(["msg" => "上传失败,参数错误请联系管理员", "err_code" => 1,]); //图片上传成功信息 
            }
        }
        return json_encode($arrList);
    }

注意

使用formData作为数据发送多文件时需使用[]方括号,如以下image[],如果不使用[]则后端无法识别或只能识别一个文件。单文件则不用。

  var formData = new FormData();
    Files.map((item) => {
        formData.append('image[]', {
            uri: item.original_uri,
            name: (new Date().valueOf()) + '.jpg',
            type: 'image/jpeg'
        });
    })

相关文章

  • react-native-syan-image-picker 上

    最近项目开发中遇到需要同时上传多张图片的需求,一番查找使用 react-native-syan-image-pic...

  • RN 压缩视频、图片 react-native-compres

    通过react-native-syan-image-picker选择视频,得到视频的路径调用react-nativ...

  • React Native 图片裁剪、多选库对比

    react-native-syan-image-picker可用于单图、多图选择,不建议使用其裁剪功能 iOS效果...

  • 使用TZImagePickerController报错[NSUR

    场景:项目中对react-native-syan-image-picker组件进行了修改,可以选择视频并且编辑但选...

  • react-native-syan-image-picker同时

    第三方库的链接:https://github.com/syanbo/react-native-syan-image...

  • 重逢既是上上上上上上签

    秦一一&陆零零 双女主纯爱小说 第一章 熟悉的声音 “一一,快过来和我一起吹蜡烛啊” “一一?一一?” “一一,我...

  • 重逢既是上上上上上上签

    第二章 酒会 (喧闹声) 坐在椅子上的秦一一,身穿一身酒红色的紧身连衣裙,外披着白色西服,心不在焉地摇晃着酒杯 唉...

  • 我的上上上上上个手机

    十年前用的anycall滑盖,还挂了个七仔。记得那是一个非常闷热的暑假,我坐115路公交在八一桥站下车,要去到马路...

  • 上,不上

    2018年 6月28日 星期四 大雨 下半年,大宝要上小学了。 之前在画画班时,听了阿姨们的谈话,就觉得还是有必要...

  • 上·路·上

    必须是在路上 可以是用脚去拷问生命的宽度 也可以是用灵魂去追寻已知的终点 再鲜活也不要定格 一路上迎接那个比狂沙更...

网友评论

      本文标题:react-native-syan-image-picker 上

      本文链接:https://www.haomeiwen.com/subject/kpovchtx.html