时间戳

首页 > 解决方案 > ReactJs - Axios：上传图片

reactjs - ReactJs - Axios：上传图片

问题描述

我希望你一切都好，尤其是在新冠危机中。

我试图使用 axios 上传图像，但它总是为空，我无法修复它。我用过encType="multipart/form-data"，<meta name="csrf-token" content="{{ csrf_token() }}"但没有什么对我有用；我认为问题onChange{}出在 ReactJs 官方文档中。

这是我的组件：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

export default class MedcineRegister extends Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            json:JSON.parse(props.data),//data received from a laravel controller used to implement the select option menu down below.
            Specialite: '1',//initialization
            image: '',
        };

        this.onChangeValue = this.onChangeValue.bind(this);
        this.onSubmitButton = this.onSubmitButton.bind(this);
    }

    onChangeValue(e) {
        this.setState({
            [e.target.name]: e.target.value,//->this line is working only for Specialite
        });
    }

    async onSubmitButton(e) {
        e.preventDefault();
        try {
            const response = await axios.post('/medcine/registerR',{
                  Specialite: this.state.Specialite,
                  image: this.state.image,
                                                                });
            console.log(response.data);//[{…}]0: {Specialite: "8" , image: null}
        } catch (error) {
        console.log("error in MedcineRegister.js");
        }
    }

    componentDidMount () {
    }

    render()
    {
        return (
          <div className="container">
              <div className="card-body">                               
                     <form encType="multipart/form-data" onSubmit={this.onSubmitButton}>
                         <div className="col-md-6">
                               <select onChange={this.onChangeValue} name="Specialite" value={this.state.value} autoFocus>     
                                   {this.state.json.map(i => (
                                      <option className="form-control" value={i.id}>{i.nom}</option>
                                    ))}
                                </select>
                          </div>

                          <div className="col-md-6">
                              <input id="file" type="file" name="file" onChange={this.onChangeValue} autoFocus/>
                          </div>

                          <div className="form-group row mb-0">
                              <button className="btn btn-primary">Submit</button>
                           </div>
                    </form>
               </div>
          </div>
        );
    }
}

if (document.getElementById('mr')) {
    var data = document.getElementById(('mr')).getAttribute('data');
    ReactDOM.render(<MedcineRegister data={data}/>, document.getElementById('mr'));
}

正如你们所看到的，consol一直在向我展示"image" : null，请知道如何解决它

标签： reactjsfile-uploadaxios

解决方案

文件输入的名称属性是“文件”。所以 onChangeValue 中的 this.setState 实际上是：

this.setState({
        "file": e.target.value
    });

图像永远不会被设置。

如果它是您要发布的文件，则需要进行一些更改。onChangeValue 函数中的 setState 应该是：

this.setState({
  image: e.target.files[0]
});

要发布的数据必须作为 formData 发送

const formData = new FormData();
  formData.append("Specialite", this.state.Specialite);
  formData.append("image", this.state.image);
  const response = await axios.post("/medcine/registerR", formData, {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  });

推荐阅读