Я застрял с загрузкой нескольких файлов в 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, которые показаны в журнале консоли.
Код выше, если загрузка документа работает! Будет отформатирован, чтобы принять мой внутренний запрос (веб-сервис) для сохранения нескольких файлов.
Внутренняя модель выглядит следующим образом.
@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
}