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

关于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)

      }

    });
  }