Я пытаюсь создать загрузчик для изображений на моем сайте React. Он будет сохранен на Amazon s3 bucket. Проблема в том, что когда я выбираю изображение, я получаю эту ошибку:
{name: "MulterError", сообщение: "Неожиданное поле", код: "LIMIT_UNEXPECTED_FILE", поле: "imageGallery", storageErrors: Array (0)}
Вот мой код для обзора: Это часть страницы, на которую загружаются изображения продолжение кода Я добавил опору из компонента Dropzone, чтобы изображения из этого компонента были представлены вместе с остальными данными.
import React, { Component } from 'react'
import './Dropzone.css'
import { display } from '@material-ui/system';
export default class Dropzone extends Component {
constructor(props) {
super(props);
this.fileInputRef = React.createRef();
this.openFileDialog = this.openFileDialog.bind(this);
this.onFilesAdded = this.onFilesAdded.bind(this);
this.onDragOver = this.onDragOver.bind(this);
this.onDragLeave = this.onDragLeave.bind(this);
this.onDrop = this.onDrop.bind(this);
this.state = {
highlight: null,
picsExist: false,
picArray: [],
selectedFiles: null
}
}
openFileDialog() {
if (this.props.disabled) return;
this.fileInputRef.current.click();
}
fileListToArray(list) {
const array = [];
for (var i = 0; i < list.length; i++) {
array.push(list.item(i));
}
return array;
}
onFilesAdded(evt) {
if (this.props.disabled) return;
const files = evt.target.files;
if (this.props.onFilesAdded) {
const array = this.fileListToArray(files);
this.props.onFilesAdded(array);
}
let picName = Object.values(files)
this.setState({
picsExist: true,
picArray: picName,
selectedFiles: evt.target.files[0]
}, () => {
console.log(this.state.selectedFiles);
this.props.photos(this.state.selectedFiles)
});
}
onDragOver(evt) {
evt.preventDefault();
if (this.props.disabled) return;
this.setState({ highlight: true });
}
onDragLeave() {
this.setState({ highlight: false });
}
onDrop(event) {
event.preventDefault();
if (this.props.disabled) return;
const files = event.dataTransfer.files;
if (this.props.onFilesAdded) {
const array = this.fileListToArray(files);
this.props.onFilesAdded(array);
}
let picName = Object.values(files)
this.setState({
highlight: false,
picsExist: true,
picArray: picName,
selectedFiles: event.target.files[0]
}, () => {
this.props.photos(this.state.selectedFiles)
});
}
render() {
// console.log(this.state.selectedFile)
let { picArray, picsExist } = this.state
console.log(picsExist, picArray)
let nameList = picArray.map((item, index) => {
return <li key={index}>{item.name}</li>
})
return (
<div>
<div
className={`${this.state.highlight ? "Highlight" : "uploadBox"}`}
onDragOver={this.onDragOver}
onDragLeave={this.onDragLeave}
onDrop={this.onDrop}
onClick={this.openFileDialog}
style={{
cursor: this.props.disabled ? "default" : "pointer",
marginBottom: picsExist ? '0' : '2.5rem'
}}
>
Click to choose files<br />
or<br />Drag and Drop <br />
<i className="fas fa-upload"></i>
<input
ref={this.fileInputRef}
className="FileInput"
type="file"
multiple
onChange={this.onFilesAdded}
/>
</div>
<ul className="nameList" style={{ margin: picsExist ? '2rem' : '0' }}>
{nameList}
</ul>
</div>
)
}
}