Блог

Я пытаюсь загрузить изображение в react js и django api с использованием axios, но когда я загружаю изображение, оно показывает файл {} , подобный этому, в запросе. Я просто хочу загрузить изображение с категорией, когда я выбираю категорию, она отображается только в файле запроса {} , я много пробовал, но это не сработало, поэтому, пожалуйста, подскажите мне, как заставить это работать. и у меня есть вот такой вот код, который я пробовал. Спасибо

 import React, { Component } from "react";
import { Helmet } from "react-helmet";
import { withTranslation } from "react-i18next";
import config from "../../Main";
import arrow_left from "../../../img/Aarrow.png";
import Swal from "sweetalert2";
import axios from "axios";

let authToken = localStorage.getItem("Token");
class EditCar extends Component {
  constructor(props) {
    super(props);
    this.state = {
    
     
     
      car_photo: [
        {
          category: "",
          sub_category: "",
          file: null,
        },
      ]
      
    };
 
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleImage = this.handleImage.bind(this)

  }

  handleSubmit(e) {
    e.preventDefault();

  

    const data = {
     
      car_photo: [
        ...this.state.car_photo.map((c) => ({
          category: c.category,
          sub_category: c.sub_category,
          file: c.file,
        })),
      ],
    };

    axios({
      method: "PUT",
      url: `${config.apiUrl.car}${this.props.match.params.pk}/profile/`,
      headers: {
        Accept: "application/json, application/xml, text/plain, text/html, *.*",
        //"Content-Type": "multipart/form-data",
        "Content-Type": "application/json",
        // "Content-Disposition": "attachment; filename=file",
        Authorization: "Bearer "   JSON.parse(authToken),
      },

      data,
    })
      .then((res) => {
        Swal.fire({
          title: "Car",
          type: "success",
          text: "Car Update Successfully  !",
          showConfirmButton: false,
          timer: 2000,
        });
      })
      .catch((err) => {
        Swal.fire({
          title: "Car",
          type: "error",
          text: "Error while updating new Car!",
          timer: 2000,
        });
      });
  }

  componentDidMount() {
    axios
      .get(`${config.apiUrl.car}${this.props.match.params.pk}/profile/`, {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          Authorization: "Bearer "   JSON.parse(authToken),
        },
      })
      .then((res) => {
        //console.log(res);
        this.setState({
          car_photo: [...res.data.car_photo],
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }

    async onChange(e, index) {
        if (["category", "sub_category"].includes(e.target.name)) {
          let cats = [...this.state.car_photo];
          cats[index][e.target.name] = e.target.value;
          await this.setState({
            cats,
          });
        } else {
          this.setState({ [e.target.name]: e.target.value });
        }
        console.log("hello", this.props.doc);
      }


 

    async handleImage(e, index) {
        if (["file"].includes(e.target.name)) {
          let cats = [...this.state.car_photo];
    
          cats[index][e.target.name] = e.target.files[0]; 
    
          await this.setState({
            cats,
          });
        
        
        } else {
          this.setState({ [e.target.name]: e.target.files[0] });
        }
      }



  render() {
   
    const { t } = this.props;

    return (
      <div className="container1" style={{ marginTop: "30px" }}>
        <Helmet>
          <title>{t("car_metrics_edit")}</title>
        </Helmet>
      


        <div className="headerr" id="headerr" style={{ marginTop: "-6px" }}>
        
          <form onSubmit={this.handleSubmit}>
            <div >

{this.state.car_photo
              .slice(0, 2)

              .map((inputField, index) => (
                <div className="row">
                 
                  <div className="form-group">
                    <select
                      name="sub_category"
                      class="form-control donn"
                      value={inputField.sub_category}
                      onChange={(e) => {
                        this.onChange(e, index);
                      }}
                      style={{ width: "220px" }}
                    >
                      <option value="" selected display hidden>
                        Select Category
                      </option>
                      <option value="Registration Documentation">
                        Registration Documentation
                      </option>
                      <option value="Plate Number Documentation">
                        Plate Number doc
                      </option>
                    </select>
                  </div>
                  amp;nbsp; amp;nbsp;
                  <div className="">
                  </div>
                  <div class="form-group">
                    <input
                      type="file"
                      name="file"
                      // value={inputField.file}
                      onChange={(e) => {
                        this.handleImage(e, index);
                      }}
                      class="form-control-file"
                      id="exampleFormControlFile1"
                    />
                  </div>
                </div>
              ))}

           

            <div style={{ marginTop: "70px" }}>
              <center>
                <button
                  type="submit"
                  value="Get Data"
                  className="btn btn-login text-white font-weight-bolder boxx "
                  id="button1"
                  style={{
                    height: "40px",
                    fontSize: "13px",

                    width: "200px",
                    background: "rgba(183, 28, 28, 1)",
                    border: "none",
                    color: "white",
                    margin: "auto",
                  }}
                >
                  SAVE
                </button>
              </center>
            </div>
              
            
          </div>
          </form>
        </div>
      </div>
    );
  }
}

export default withTranslation()(EditCar);
  

Вот изображение данных, которые я проверил console.log(data) после отправки формы.
[

Вот изображение того, что отображается в запросе после отправки формы. [