Question

我一直在开发React应用，我们可以在其中上传图像。一切正常，但是突然图像上传功能中断了。

我可以通过选择文件按钮上传图像，效果很好，我还提供了一组示例图像，用户可以在其中上传。他们只需要单击下面的图像，然后按Analyze按钮。但是，当我这样做时，一个文件被上传，但是以字节为单位，没有任何图像，此功能运行良好，我不知道是什么损坏了它。

这是代码。

    import React from 'react';
import Axios from 'axios';
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Style from './Imgupload.module.css'
import Button from 'react-bootstrap/Button'
import Slider from 'react-slick'
import StackOfImages from '../StaticImages/StaticImages'

// import Alertbox from '../Alert/Alertbox';



class Main extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      file: '',
      preview: '',
      uploading: false,

    };


  }

  onChange = (e) => {

    if (e.target.files[0] !== undefined) {
      this.setState({ preview: URL.createObjectURL(e.target.files[0]), file: e.target.files[0]})
    }
    else {
      this.setState({ preview: '', file: '' })
    }
  }

  onFormSumbit = (e) => {
    e.preventDefault()
    const formData = new FormData();

    formData.append('file', this.state.file)

    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      },
      onUploadProgress: progressEvent => console.log(progressEvent.loaded)
    }

    Axios.post('http://localhost:3001/upload', formData, config).then((response) => {
      console.log(response);
    }).catch((error) => {
      if (error) {
        this.props.checkError(true)
      }
    })

  }

  changeImage = (e) => {
    var f = new File([e],e)
    this.setState({ preview: e, file: f },function(){
      console.log(this.state.file)
    })
  }

  render() {




    var prevImage = this.state.preview === '' ? <div className={Style.prev}><div className={Style.blank}>No image preview</div></div> : <img src={this.state.preview} className={Style.prev} alt="preview" />
    return (
      <>
        <Row>
          <div className={Style.imgPosition}>
            <Col md={12} className={Style.finalPosition}>
              {prevImage}
            </Col>
            <Col md={12} className={Style.position}>
              <form className={Style.formPosition} onSubmit={this.onFormSumbit}>
                <input type="file" onChange={this.onChange} name="foo" />
                <Button className={Style.upload} type="submit">Analyze</Button>
              </form>
            </Col>

          </div>
        </Row>
        <Row>
        <Col md={12} >
          <div className={Style.staticImages}>
            <Row>          {/* <Slider {...settings}> */}

           {/* {stack} */}


                <Col md={3}>
                  <img src='shoe1.jpg' onClick={()=>this.changeImage('shoe1.jpg')} className={Style.smallImg} alt="preview" />
                </Col>
                <Col md={3}>
                  <img src='shoe2.png' onClick={()=>this.changeImage('shoe2.png')} className={Style.smallImg} alt="preview" />
                </Col>
                <Col md={3}>
                  <img src='blue.jpg' onClick={()=>this.changeImage('blue.jpg')} className={Style.smallImg} alt="preview" />
                </Col>

          {/* </Slider> */}
          </Row>

          </div>
        </Col>
      </Row>

      </>
    );
  }
}

export default Main;

如果有人可以请帮助.. !!!我疯了，后端工作正常

图片在上传时被破坏

0 个答案: