首页 > 七牛上传图片组件,怎么在新增整个组件之后,原组件与新增组件在使用时,可以分别上传不同的图片,拿到不同的七牛key?

七牛上传图片组件,怎么在新增整个组件之后,原组件与新增组件在使用时,可以分别上传不同的图片,拿到不同的七牛key?

我现在有个使用场景:
在使用七牛的图片上传组件在上传一张图片,拿后这张图片的七牛key;点击“新增”按钮,新增一组七牛的图片上传组件,使用新增的这个组件再上传另一张图片,并拿到这张图片的七牛key?

因为第二次新增的是相同的组件,我在使用新增的组件上传图片时,会把第一次上传的七牛key替换掉,怎么解决?

批量新增的方法:

//批量添加
    addContent(e){
        if(this.state.number.length >= this.state.maxNum){
            return;
        }
        this.state.number.push(this.state.number[this.state.number.length -1] + 1);
        let temp = this.state.number;
        this.setState({
            number: temp
        });
    }

ImgList2 为七牛上传的组件
callback 为回调七牛key的方法

        let IOSItems2 = [];
        for(let i = 0; i < this.state.number.length; i++){
            IOSItems2.push(<ImgList2 index={i} callback={this.props.callback.bind(this)} key={this.state.number[i]} {...this.props} />)
        }

点击【增加】按钮,新增七牛组件:

<button className="btn btn-primary" onClick={this.addContent.bind(this)} >增加</button>

比较丑的图片,但是能看出是怎么新增的:

【热门文章】
【热门文章】