Как решить неожиданную проблему с полем при работе с multer для aws? - PullRequest
0 голосов
/ 10 ноября 2019

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