Загрузка нескольких файлов в ReactJS - PullRequest
0 голосов
/ 25 апреля 2019

Я застрял с загрузкой нескольких файлов в ReactJS. Я загрузил один файл до того, как показано с кодами ниже. Я использовал sessionStorage, чтобы иметь возможность просматривать файлы binaryString.

<input
type="file"
onChange={(evt) => {

    let files = evt.target.files;
    let file = files[0];

    if (files && file) {
        let reader = new FileReader();
        reader.onload = function (readerEvt) {
            let binaryString = readerEvt.target.result;
            const image = btoa(binaryString);
            const formattedImage = 'data:image/octet-stream;base64,' + image;
            isLoad = true
            sessionStorage.setItem('load', JSON.stringify(isLoad))
            SingleImageBase64Model.setSingleImageBase64(formattedImage);
        }
        reader.readAsBinaryString(file);


        if (JSON.parse(sessionStorage.getItem('load')) === true) {
            this.setState({ isImageLoaded: true });
        } else {
            this.setState({ isImageLoaded: false });
        }
    }
}} />

Сегодня я хотел бы загрузить несколько файлов. Данные будут отправлены веб-сервису Restful, написанному на Java (Spring Boot). В настоящее время у меня есть следующее в ReactJS и не работает для загрузки нескольких файлов.

// In return method, HTML for file-picker
<input
type='file'
multiple
onChange={this.onFileChange} />

// Function for handling file/s uploads
onFileChange = (event) => {
const fileData = event.target.files;
const blob = new Blob([fileData]);
const reader = new FileReader();

reader.onloadend = () => {
    for (let i = 0; i < fileData.length; i++) {

        console.log('Data to be sent', {
            name: fileData[i].name,
            fileSize: fileData[i].size,
            fileContentType: fileData[i].type,
            file: reader.result
        });
    }
}
reader.readAsDataURL(blob); }

Моя проблема связана с reader.result , он возвращает те же данные binaryString, которые показаны в журнале консоли.

enter image description here

Код выше, если загрузка документа работает! Будет отформатирован, чтобы принять мой внутренний запрос (веб-сервис) для сохранения нескольких файлов.

Внутренняя модель выглядит следующим образом.

@Entity
public class Document implements Serializable {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@NotNull
private String name;
private String description;
@Lob
private byte[] file;
private int fileSize;
private String fileContentType;

// constructors
// getter and setters

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...