Django-rest 框架、React JS、Axios-包含图像文件的 Post JSON 数据 [英] Django-rest framework, React JS, Axios- Post JSON data which contains image file

问题描述

如何使用 axios 将图像文件上传到 Django_Rest 框架我有简单的模型:

class 文章(models.Model):标题=models.CharField(max_length=120)文本 = 模型.TextField()img = models.ImageField(upload_to='article_images/', blank=True, null=True)create_time = models.DateTimeField(default=datetime.utcnow, blank=True,空=真

和 React JS 中的简单表单:

class ArticleForm 扩展 React.Component {状态= {img:未定义}handleUpolad =(事件)=>{event.preventDefault();const img=event.target.files[0];this.setState({图像:图像})}handleFormSubmit = (事件)=>{event.preventDefault();const title=event.target.elements.title.value;const content=event.target.elements.content.value;axios.post('http://127.0.0.1:8000/api/',{标题:标题，文字:内容，}).then(res=>console.log(res)).catch(err=>console.log(err))}使成为() {返回 (<div><Form onSubmit={this.handleFormSubmit}><Form.Item label="Title";><输入占位符=输入占位符"名称='标题'/></Form.Item><Form.Item label="内容"><输入占位符=输入占位符"名称='内容'/></Form.Item><Form.Item label="Dragger";><div className="dropbox"><input type='file' onChange={this.handleUpolad} name='img'></输入>

</Form.Item><表单.项目><按钮类型=主要"htmlType="submit">Submit</Button></Form.Item></表格>

);}}

当我只发布标题和内容时，它工作正常.如何使用 Axios 发布包含此数据的图像文件?

解决方案

我认为你可以利用 FormData API.

另外，我认为您不需要在状态中添加图像.您可以简单地将其保留为类变量.如果您设置了状态 - 将有不必要的重新渲染.为什么不避免呢?

这是修改后的代码，有一些注释:

class ArticleForm 扩展 React.Component {选择文件 = 空；//将选择的文件保存在此handleUpolad = 事件 =>{event.preventDefault();this.pickedFile = event.target.files[0];}handleFormSubmit = 事件 =>{event.preventDefault();让数据 = 新的 FormData();//创建一个新的 FormData 对象data.append('title', event.target.elements.title.value);data.append('text', event.target.elements.content.value);data.append('img', this.pickedFile);//将你的文件添加到表单数据中axios.post('http://127.0.0.1:8000/api/', 数据).then(res=>console.log(res)).catch(err=>console.log(err))}使成为() {//你常用的代码}}

How I can upload image files to the Django_Rest framework using axios I have simple model:

class Article(models.Model):

    title = models.CharField(max_length=120)
    text = models.TextField()
    img = models.ImageField(upload_to='article_images/', blank=True, null=True)
    create_time = models.DateTimeField(default=datetime.utcnow, blank=True, 
    null=True

and simple form in React JS:

class ArticleForm extends React.Component {
    state= {
        img: undefined
    }
    handleUpolad =(event)=>{
         event.preventDefault();
        const img=event.target.files[0];
        this.setState({
            img:img
        })
    }
    handleFormSubmit = (event)=>{
        event.preventDefault();
        const title=event.target.elements.title.value;
        const content=event.target.elements.content.value;
        Axios.post('http://127.0.0.1:8000/api/',{
            title:title,
            text:content,
                       
        }).then(res=>console.log(res))
        .catch(err=>console.log(err))
    }
    render() {
      return (
        <div>
          <Form  onSubmit={this.handleFormSubmit}>
            
            <Form.Item  label="Title"  >
              <Input placeholder="input placeholder" name='title' />
            </Form.Item>

            <Form.Item label="Content"   >
              <Input placeholder="input placeholder" name='content' />
            </Form.Item>
            
            <Form.Item label="Dragger"  >
                <div className="dropbox">            
                    <input type='file' onChange={this.handleUpolad} name='img'>                
                    </input>                     
                </div>
             </Form.Item>
             <Form.Item >
              <Button type="primary" htmlType="submit">Submit</Button>
            </Form.Item>
          </Form>
        </div>
      );
    }
  }

It's work fine when I post only Title and Content. How I can post an image file with this data using Axios?

解决方案

I think you can take advantage of FormData API.

Also, I don't think you need to add the image in state. You could simply keep it to a class variable. If you set the state- there will be unnecessary re-render. Why not avoid that?

Here is the modified code with some comments:

class ArticleForm extends React.Component {
  pickedFile = null; // save the picked file in this

  handleUpolad = event => {
    event.preventDefault();
    this.pickedFile = event.target.files[0];
  }

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

    let data = new FormData(); // creates a new FormData object
    data.append('title', event.target.elements.title.value);
    data.append('text', event.target.elements.content.value);
    data.append('img', this.pickedFile); // add your file to form data

    Axios.post('http://127.0.0.1:8000/api/', data)
    .then(res=>console.log(res))
    .catch(err=>console.log(err))
  }

  render() {
    // your usual code
  }
}

这篇关于Django-rest 框架、React JS、Axios-包含图像文件的 Post JSON 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！