如何在React js和Django中上传图片？

问题描述

我正在尝试使用Django后端上的react js上传图像，但是当我尝试上传图片并检查console.log()图像文件是否存在时，一旦我提交表单图像文件对象{}空我不知道为什么我提交的节目一直都上传但所有时间图像都显示为null，这是到目前为止我的代码。这也是代码沙箱链接的链接。 https://codesandbox.io/s/thirsty-varahamihira-fnusu?file=/src/App.js:0-1494。谢谢。

import React,{ Component } from "react";
import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      image: null
    };
  }

  handleInputChange = async (event) => {
    await this.setState({
      [event.target.name]: event.target.files[0]
      // image: event.target.files[0]
    });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    const formdata = new FormData();
    formdata("image",this.state.image);
    fetch(`https://inback.herokuapp.com/api/1/blog/image/list/`,{
      method: "POST",headers: {
        "Content-Type": "multipart/form-data",Authorization: "Bearer 6tEg0RinS5rxyZ8TX84Vc6qXuR2Xxw"
      },body: formdata
    })
      .then((response) => {
        if (response.ok) {
          alert("Success");
        } else {
          alert("error");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  render() {
    return (
      <div id="other" className="">
        <p className="mod" style={{ marginTop: "10px" }}>
          Uplaod
        </p>
        <hr></hr>

        <form onSubmit={this.handleSubmit}>
          <input type="file" name="image" onChange={this.handleInputChange} />
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

export default App;

解决方法

请尝试使用这样的formdata：

df = df1.merge(df2,how='left',on='val',indicator='both')
df['both'] = df.both.eq('both').mul(df.val)

print(df)
   val  dat  both
0    1    0     0
1    2    0     0
2    3  100     3
3    4  100     0
4    5   50     5
5    6    4     0

,

谢谢，我能够解决此问题，这里是有效的代码和沙箱链接。 https://codesandbox.io/s/naughty-maxwell-ojnql?file=/src/App.js:0-1344。

import React,{ Component } from "react";
import axios from "axios";
import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      image: null
    };
  }

  handleInputChange = async (event) => {
    event.preventDefault();
    await this.setState({
      // [event.target.name]: event.target.files[0]
      image: event.target.files[0]
      // image: event.target.files[0]
    });
  };

  handleFormSubmit = (event) => {
    event.preventDefault();

    let data = new FormData(); // creates a new FormData object

    data.append("image",this.state.image); // add your file to form data

    axios({
      method: "POST",url: "https://inback.herokuapp.com/api/1/blog/image/list/",headers: {
      
        Authorization: "Bearer 6tEg0RinS5rxyZ8TX84Vc6qXuR2Xxw"
      },data
    })
      .then((res) => console.log(res))
      .catch((err) => console.log(err));
  };

  render() {
    return (
      <div id="other" className="">
        <p className="mod" style={{ marginTop: "10px" }}>
          Uplaod
        </p>
        <hr></hr>

        <form onSubmit={this.handleFormSubmit}>
          <input type="file" name="image" onChange={this.handleInputChange} />
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

export default App;