反应问题:我在上传文件时尝试了文件数据集的状态,但它不起作用

Posted

技术标签:

【中文标题】反应问题:我在上传文件时尝试了文件数据集的状态,但它不起作用【英文标题】:React Problem : I tried file data set in state when upload file, but it isn't work 【发布时间】:2019-09-30 05:14:31 【问题描述】:

首先,我不是英语本地人。所以,我的句子可能在语法上是错误的,或者难以表达意思。

我有一个使用 Laravel 和 Axios 的 React 项目。我想在我的服务器上上传图像数据。所以,我尝试在文件上传时将文件数据设置为跟随this document,但它不起作用。

我想知道为什么它不起作用。

这是我的一些代码。

import Axios from 'axios';
import React,  Component  from 'react';

class Register extends Component 
  constructor() 
    super();
    this.state = 
      name: '',
      email: '',
      password: '',
      password_confirmation: '',
      profile_picture: null,
      errors: [],
    

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.hasErrorFor = this.hasErrorFor.bind(this);
    this.renderErrorFor = this.renderErrorFor.bind(this);
  

  handleChange(event) 
    if(event.target.name.match('profile_picture')) 
      // when input profile picture
      this.setState(
        [event.target.name]: event.target.files[0],
      );

      console.log(event.target.files[0]);
     else 
      // when input text values
      this.setState(
        [event.target.name]: event.target.value,
      );
    

    console.log(this.state);
  

  handleSubmit(event) 
    // submit event
  

  hasErrorFor(field) 
    // detect error
  

  renderErrorFor(field) 
    // render error message
  

  render()   
    return (
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-md-8">
            <div className="card">
              <div className="card-header">Register</div>
              <div className="card-body">
                <form 
                  action="/api/register"
                  method="post"
                  encType='application/x-www-form-urlencoded'
                  onSubmit=this.handleSubmit
                >
                  <div className="form-group">
                    // input name
                  </div>

                  <div className="form-group">
                    // input email
                  </div>

                  <div className="form-group">
                    // input password
                  </div>

                  <div className="form-group">
                    // input password confirmation
                  </div>

                  <div className="form-group">
                    <label htmlFor="profile_picture">Profile Picture</label>
                    <input
                      id="profile_picture" 
                      type="file"
                      name="profile_picture"
                      className='form-control-file'                      
                      onChange=this.handleChange
                    />
                    this.renderErrorFor('profile_picture')
                  </div>

                  <button className="btn btn-primary">SUBMIT</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  


export default Register;

And here is result of this code.

我上传文件的时候除了上传的文件设置为状态,但是文件没有设置为状态。

【问题讨论】:

【参考方案1】:

您在 setState 方法之后立即编写了 console.log(),因为 setState 是一个异步方法,并且在 java 脚本运行您的 console.log 时,它将向您显示之前的状态,其中显然没有设置图像对象, 为此你应该把你的控制台放在 setState 的第二个参数中,它是一个回调函数。

this.setState([event.target.name]: event.target.files[0],()=>console.log(this.state));

【讨论】:

以上是关于反应问题:我在上传文件时尝试了文件数据集的状态,但它不起作用的主要内容,如果未能解决你的问题,请参考以下文章

错误:元素类型无效:在尝试更新状态时,应在反应中出现字符串

尝试在已部署的反应客户端和快速服务器上上传图像文件时出现 503 错误,然后是 CORS 错误

使用 Progress React 上传文件

如何在反应中上传时检查受限制的文件

从 django 静态文件提供服务并上传到 heroku 时无法找到反应静态文件

文件和打印共享资源处于联机状态,但未对脸接尝试做出反应