Как получить выходной файл в нескольких загружать реагировать JS?

Question

Я пытаюсь создать несколько загружаемых изображений с помощьюactjs (клиент) и с помощью flask (сервер), но у меня есть некоторые проблемы, файл вывода на моем сервере просто [],

Я уже пытался использовать request.files.getlist ("file []") и request.get_json (force = True), но результат тот же

вот мой код:

клиент

import React, { Component } from "react";
import axios from 'axios';

class Menfess extends Component {
    constructor(props) {
    super(props);
    this.state = {
      files: [],
    };
    this._handleImageChange = this._handleImageChange.bind(this);
    this._handleSubmit = this._handleSubmit.bind(this);
  }

  _handleSubmit(e) {
    //Sumbit handler
    e.preventDefault();
    const formData = new FormData();
    formData.append('image', this.state.files,this.state.files.name);
    this.setState({files:FormData})
    console.log(this.state)
    axios
    .post('http://127.0.0.1:5000/postjson', formData,{headers: {
  'Content-Type': 'application/x-www-form-urlencoded'}}) 
    .then(response => { console.log(response) });
    this.setState({files:[]})
  }

  _handleChange = (e)=>{
    this.setState({
      text: e.target.value
    })
  }


  _handleImageChange(e) {
    e.preventDefault();

    let files = Array.from(e.target.files);

    files.forEach((file) => {
        let reader = new FileReader();
        reader.onloadend = () => {
            this.setState({    
                 files:[...this.state.files, file]
            });
        }
        reader.readAsDataURL(file);
    this.setState({files:[]})
    });
  }
//        <MDBInput name="text" label="Material input" value={this.state.text} onChange={this._handleChange}/>
  render() { 
    return (
      <div>
        <form onSubmit={this._handleSubmit} encType="multipart/form-data">
        <input className="upload" type="file" accept='image/*' onChange={this._handleImageChange} multiple/>
        <button type="submit" onClick={this._handleSubmit}>Upload Image</button>
        </form>
      </div>
    )
  }
}

export default Menfess;

Сервер:

from flask import Flask
from flask import request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/postjson', methods = ['POST'])
def postJsonHandler():
    #print (request.is_json)
    #content = request.get_json(force=True)
    files = request.files.getlist("file[]")        
    print(files)
    return 'JSON posted'

app.run()

есть идеи, чтобы это исправить? спасибо

Answer 1

Первое, о чем я могу подумать, это присвоить полю input атрибут name, например file или file[] (разные соглашения работают для разных серверов).

Кроме того, это может иметь отношение к вам - загрузка нескольких файлов с использованием одного и того же имени в django