«MulterError: неожиданное поле» при попытке отправить formData - PullRequest
Новая
       39

«MulterError: неожиданное поле» при попытке отправить formData

0 голосов
/ 19 февраля 2019

Я пытаюсь отправить форму, содержащую изображение или набор изображений, в Express API, используя Axios.Когда я пытаюсь отправить его, я получаю следующую ошибку в Express: 

MulterError: Unexpected field

Я использую React-Dropzone для получения файлов.После этого я получаю все данные формы через состояние, а затем преобразовываю объект в FormData ().Я пробовал с и без следующей конфигурации на axios: {headers: {'Content-Type': 'multipart / form-data'}} Но результат всегда один и тот же.

Мой экспресс-маршрут: 

app.post('/adverts', requireAuth, upload.array('images'), Adverts.create);

Мой конфиг мультитера (с использованием multer-s3): 

const multer = require('multer');
const multerS3 = require('multer-s3');
const uuid = require('uuid/v1');
const aws = require('aws-sdk');

const s3 = new aws.S3({
    accessKey: process.env.AWS_ACCESS_KEY,
    secretAccesKey: process.env.AWS_SECRET,
    region: 'eu-west-1',
});

const upload = multer({
    storage: multerS3({
        s3: s3,
        bucket: process.env.AWS_S3_IMG,
        acl: 'public-read',
        metadata: function(req, file, cb) {
            cb(null, { fieldName: file.fieldname });
        },
        key: function(req, file, cb) {
            cb(null, `${req.user.id}/${uuid()}`);
        },
    }),
});
module.exports = upload;

Мой компонент реакции: 

<form onSubmit={this.handleSubmit.bind(this)} encType="multipart/form-data">
    <TextField
        fullWidth
        label='title'
        value={this.state.title}
        onChange={e => this.setField('title', e)}
        type="text"
        required
        />
    <Dropzone onDrop={this.onDrop} accept=".png,.jpg,.jpeg" maxSize={5000000} name="images">
        {({ getRootProps, getInputProps, isDragActive }) => {
            return (
                <div className={classes.dropBox} {...getRootProps()}>
                    <input {...getInputProps()} />
                    {isDragActive ? <p>Drop...</p> : <p>Drag here and drop to upload</p>}
                 </div>
            );
        }}
    </Dropzone>
    <Button color="primary" variant="contained" type="submit">
        Create
    </Button>
</form>

Форма handleSubmit: 

handleSubmit = e => {
     e.preventDefault();
     const { title, images } = this.state;
     /* some validation */

     const formData = objectToFormData(values);
     api.post('/adverts', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(advert =>
          Router.push(`/ad/${advert.data.reference}`)
      );
}

Функция onDrop, срабатывает, когда пользователь добавляет изображение: 

onDrop = files => {
    const images = this.state.images.concat(
        files.map(file =>
            Object.assign(file, {
                preview: URL.createObjectURL(file),
            })
        )
    );

    const totalsize = images.reduce((total, current) => {
        return total + current.size;
    }, 0);

    if (totalsize < 5000000) {
        this.setState({
            images,
            fileSize: (totalsize / 1e6).toFixed(2),
            filePercentage: (totalsize * 100) / 5000000,
        });
    }
};

1 Ответ

0 голосов
/ 19 февраля 2019

ошибка в вашем коде в том, что вы отправляете одно изображение и, принимая, вы принимаете массив

try 

app.post('/adverts', requireAuth, upload.single('image'), Adverts.create);
...