React-Native--多图选择上传

最新推荐文章于 2023-01-07 11:17:01 发布

LeoJame

最新推荐文章于 2023-01-07 11:17:01 发布

阅读量6.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： RN 文章标签： ReactNativ

本文链接：https://blog.csdn.net/LeoJame/article/details/76927001

本文介绍了如何在React-Native应用中实现多图选择不覆盖已有图片的功能，并通过FormData上传图片，详细阐述了实现过程和代码示例。

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

参考资料：http://www.jianshu.com/p/488e62ed9656

一：使用react-native-image-crop-picker进行图片选择时，并没有提供多图的机制。
当你从相机选择图片时，会覆盖之前已经存在的图片。所以，今天，来一个多图选择并上传的例子，此例子中，会保存你之前已经选择的图片。例如，当前列表已经存在一张照片，当你去相册或者使用相机进行拍照时，不会覆盖当前列表已经存在的照片。

二：使用FormData进行图片上传，并根据需要进行其他参数的添加

三： Coding
这里写图片描述

pic.gif

//第三方库，需要使用npm引入
import ImagePicker from 'react-native-image-crop-picker';
import ActionSheet from '../../components/ActionSheet/ActionSheet'
import Config from '../../../Config'

import ModalProgress from '../../components/Progress/ModalProgress'

//存放数组
var dataToPost = [];

export  default class LoadingPage extends React.Component {
   
   
    static navigationOptions = ({ navigation }) => {
        const {state} = navigation;
        return {
            title: '上传信息',
            headerRight: (
                <Button
                    title="上传"
                    onPress={
  
  ()=>{
                      state.params.commitPage();
                    }}
                />
            ),
        };
    };

    componentWillMount(){
        this.props.navigation.setParams({
            commitPage:this.commitPage,
        })
    }
    constructor(props){
        super(props);
        this.state={
            images: [],
        }
    }
    show() {