react-native-image-picker的使用简单总结-优快云博客

本文链接：https://blog.youkuaiyun.com/qq564280420/article/details/115698124

本文介绍了如何在React Native应用中使用react-native-image-picker库来调用相机和相册选择图片，并对图片进行处理。同时，文章还详细讲解了如何在调试模式下上传图片的API调用过程，包括使用FormData进行文件封装和fetch API进行POST请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、依赖安装

依赖 react-native-camera

yarn add react-native-image-picker
react-native link react-native-image-picker

二、调用相机

import { launchCamera } from 'react-native-image-picker';
launchCamera({
    mediaType: 'photo',
    maxWidth: 1000,// 设置选择照片的大小，设置小的话会相应的进行压缩
    maxHeight: 1000,
    quality: 0.8,
    // videoQuality: 'low',
    // includeBase64: true
}, res=>{
    if(res.didCancel){
        return false;
    }
    // 对获取的图片进行处理
})

三、调用相册

import { launchImageLibrary } from 'react-native-image-picker';
launchImageLibrary({
    mediaType: 'photo',
    maxWidth: 1000,// 设置选择照片的大小，设置小的话会相应的进行压缩
    maxHeight: 1000,
    quality: 0.8,
    // videoQuality: 'low',
    // includeBase64: true
}, res=>{
    if(res.didCancel){
        return false;
    }
    // 对获取的图片进行处理
})

四、上传

上传的时候需要关掉debugger模式，不然会失败

// 上传图片api调用
async function uploadImage(params) {
    const formData = new FormData();
    formData.append('file', {
        uri: params.uri,
        type: params.type,
        name: params.fileName,
    });
    return await fetch(`apiurl`, {
        method: 'post',
        body: formData,
        headers: {
            'Content-Type': 'multipart/form-data'
        },
    }).then((response) => {
        return response.json()
    })
}