использование FormData () в реагирует продолжает возвращать ноль - PullRequest
Новая
       41

использование FormData () в реагирует продолжает возвращать ноль

0 голосов
/ 19 марта 2020

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

это мой jsx 

<form>
    <input type="file" name="file" onChange={(e) => this.handleFile(e)}></input>
    <button type="button" onClick={(e) => this.handleUpload(e)} >send</button>
</form>

и вот код, который я использую для обработки этих 

state = {
   file: null
};
handleFile(e) {
   console.log(e.target.files, "ssss");
    console.log(e.target.files[0], "ssss");
    let file = e.target.files

    this.setState({ file: e })
}
handleUpload(e) {
  let file = this.state.file
  let fromdata = new FormData();
  fromdata.append('image', file);
  fromdata.append('name', "filedata");
  const headers = {
        Authorization': localStorage.getItem('api_key'),

  }
  const user = {
       filedata: fromdata,
       type: 1,
  };
  axios.post(`sth sth`, user, {
       headers: headers
  })
       .then(res => {
           console.log(res);
           console.log(res.data);
        })
}

, поэтому в основном серверу требуются type и filedata, но каждый раз, когда я отправляю запрос api, он постоянно возвращает мне 

filedata: ["The filedata field is required."]

, и я не могу найти причину проблемы.

Ответы [ 2 ]

2 голосов
/ 19 марта 2020

Предполагая, что вы хотите загрузить один файл, проблема, которую я вижу, заключается в установке файла в состояние. Вы помещаете весь ответ в состояние в этом утверждении: this.setState({ file: e }) измените его на this.setState({ file: e.target.files[0] }).

В основном вы берете больше, чем просто файл, вы берете весь ответ и другие данные, которые появляются, когда пользователь загружает файл с помощью кнопки выбора выбора файла, и из-за этого вещи не могут прочитайте хорошо.

Моя практика: я бы поместил файл в глобальное var вместо состояния.

Обычно в таких случаях это функция, которая не завершается, но основной поток продолжает работать, поэтому переменные имеют нулевое или старое значение. 

var file, fromdata;

handleFile(e) {
    file = e.target.files[0];
}
handleUpload(e) {
    fromdata = new FormData(); //make sure this statement completes before moving any further
    fromdata.append('image', file);
    fromdata.append('name', "filedata");
    const headers = {
        Authorization': localStorage.getItem('api_key'),

    }
    user = {
        filedata: fromdata,
        type: 1,
    };
    axios.post(`sth sth`, user, {
        headers: headers
    })
        .then(res => {
            console.log(res);
            console.log(res.data);
        })
}
1 голос
/ 19 марта 2020

Правильно поработайте над функцией handleFile и добавьте заголовок Content-Type / Accept в ваш запрос API, ваш окончательный код должен выглядеть примерно так. на вашем api console.log (req.file) вы должны увидеть, что ваш файл теперь успешно достигает сервера, или, если вы можете предоставить немного кода своего сервера, я смогу помочь вам в дальнейшем. 

import React from 'react';
import axios from 'axios';

export class Test extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            file : null
        }
        this.handleFile = this.handleFile.bind(this)
        this.handleUpload = this.handleUpload.bind(this)
    }

    handleFile(e) {
        let file = e.target.files[0]
        this.setState({ file })
    }

    handleUpload (e) {
        e.preventDefault();
        let file = this.state.file
        let fromdata = new FormData();
        fromdata.append('image', file);
        const headers = {
                'Authorization': localStorage.getItem('api_key'),
                'Content-Type' : 'multipart/form-data'
        }
        const user = {
            filedata: fromdata,
            type: 1,
        };
        axios.post(`sth sth`, user, {
            headers
        })
       .then(res => {
           console.log(res);
           console.log(res.data);
        })
    }


    render() {
        return (
            <form onSubmit={this.handleUpload}>
                <label>File</label><br/>
                    <input type='file' onChange={this.handleFile}/>
                <button>Send File!</button>
            </form>
        )
    }
}
...