Как добавить несколько изображений с помощью formData в реагировать - PullRequest
Новая
       7

Как добавить несколько изображений с помощью formData в реагировать

0 голосов
/ 17 января 2019

Я новичок в Reactjs.Я использую loopback-storage-connectcter для хранения изображений / файлов.Теперь моя проблема состоит в том, чтобы загрузить более одного файла, используя formData()

мой код 

constructor(props){
    super(props);
    this.state = {
        car_photo : [],
        Car_Image : []
    }
}
fileUploadCarImg = ()=> {
        const fd = new FormData();
        this.state.Car_Image.forEach((item , i) => {
            fd.append('image2',this.state.Car_Image, this.state.Car_Image.name )
        });

        axios.post('http://localhost:3000/api/attachmentBanks/Car_Image/upload',fd , {
            onUploadProgress : ProgressEvent => {
                console.log('Upload Progress: ' + Math.round(ProgressEvent.loaded / ProgressEvent.total *100) + '%')
            }
        })
        .then(res => {
            this.setState({
                car_photo: res.data.result.files.image2[0].name,

            });

        });
    }

    fileSelectedCarImg = event =>{
        console.log(Array.from(event.target))
        this.setState({
            Car_Image: Array.from(event.target.files[0])
        })

    }

мое поле ввода 

<FormGroup>
<span>Car Image</span> 
  <input style={{display :'none'}} type="file" onChange={this.fileSelectedCarImg} ref={fileInput3 => this.fileInput3 = fileInput3 } required multiple />
 <Button onClick={()=>this.fileInput3.click()} ><Icon type="upload" />Choose Image
 </Button> &nbsp;
 <Button onClick={this.fileUploadCarImg}> upload </Button>
</FormGroup>

при использовании этого кода Upload Progress: 100% напечатано в консоли, но файл не попал в папку.Пожалуйста, помогите

1 Ответ

0 голосов
/ 18 января 2019

Я нашел рабочий код 

fileSelectedCarImg = event =>{
        const file = Array.from(event.target.files);
    this.setState({ file })
}

fileUploadCarImg =()=>{
        for (let index = 0; index < this.state.file.length; index++) {
            const element = this.state.file[index];
            const fd = new FormData();
            fd.append('image2',element,element.name )
            axios.post('http://localhost:3000/api/attachmentBanks/Car_Image/upload',fd , {
                onUploadProgress : ProgressEvent => {
                    console.log('Upload Progress: ' + Math.round(ProgressEvent.loaded / ProgressEvent.total *100) + '%')
                }
            })
            .then(res => {
                this.setState({
                    car_photo: res.data.result.files.image2[0].name,
                });

            });

        }
    }
...