React - Picture Input Box - Mobile Web Page _018

Keywords: Front-end React Mobile github Webpack

React-Picture Input Box-Mobile Web Page

gitHub Address Feels Valuable for Reference

directory structure

.
├── README.md
├── dist
│   ├── bundle.js
│   └── index.html
├── package.json
├── src
│   ├── components
│   │   ├── ErrorPage
│   │   │   ├── ErrorPage.css
│   │   │   └── ErrorPage.js
│   │   ├── Notice
│   │   │   ├── Notice.css
│   │   │   └── Notice.js
│   │   ├── PersonalUploadFileForm
│   │   │   ├── PersonalUploadFileForm.css
│   │   │   └── PersonalUploadFileForm.js
│   │   ├── SuccessPage
│   │   │   ├── SuccessPage.css
│   │   │   └── SuccessPage.js
│   │   └── common
│   │       ├── actions.js
│   │       ├── getUrlpargm.js
│   │       └── utils.js
│   ├── index.html
│   ├── index.js
│   └── page
│       ├── UploadForm.js
│       └── upLoadForm.css
├── webpack.config.js
└── webpack.production.config.js

Upload component code

Based on the native API interface, the file camera option appears on the mobile phone by clicking on the input box.
You can choose to upload your photos.
To solve the bug of Weichat's built-in upload, accept is set to accept="image/*"

The loading component finds a simple action

npm config set '@bit:registry' https://node.bit.dev
npm i @bit/davidhu2000.react-spinners.pulse-loader

source

https://bit.dev/davidhu2000/r...

import React from 'react';
import './PersonalUploadFileForm.css';
import toast from '../Notice/Notice';
import PulseLoader from '@bit/davidhu2000.react-spinners.pulse-loader';
class PersonalUploadFileForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filePreviewUrl: this.props.value ? this.props.value.base64 : '',
      overSizeModel: false,
    };
  }

  selectFile = e => {
    e.preventDefault();
    this.refs.fileinput.click();
  };

  _handleFileChange = e => {
    e.preventDefault();

    let reader = new FileReader();
    let file = e.target.files[0];

    reader.onloadend = () => {
      if (file.type != 'image/jpeg' && file.type != 'image/png') {
        toast('Please select the picture.',"error");
        return false;
      }
      if (file.size > 8000000){
        toast('The picture is too big.,Please re-select',"error");
        return false;
      }
      this.setState({
        filePreviewUrl: reader.result,
      });
      this.props.onChange({ name: file.name, base64: reader.result });
    };

    reader.readAsDataURL(file);
    e.target.value = null;
  };

  render() {
    let { filePreviewUrl } = this.state;
    let { backimg, textTip, displaybackimg, uploading } = this.props;
    return (
      <div className="uploadpicture">
        <div>
          <div className="uploadpictureimg" onClick={this.selectFile}>
            <div className="img-preshow">
              {uploading ? (
                <div
                  className="img-preshow-loading"
                  style={{
                    backgroundImage: `url(${filePreviewUrl})`,
                    opacity:"0.7"
                  }}
                >
                  <div style={{ position: 'relative', display: 'inline', lineHeight: '2.62rem' }}>
                    <PulseLoader size={0.16} margin={'0.2rem'} color="#5f87f8" sizeUnit="rem"  />
                  </div>
                </div>
              ) : (
                <img
                  src={displaybackimg ? filePreviewUrl : backimg}
                  style={{ width: '100%', height: '100%' }}
                />
              )}
            </div>
          </div>
          <div>
            <input
              type="file"
              ref="fileinput"
              onChange={this._handleFileChange}
              style={{ display: 'none' }}
              accept="image/*"
            />
          </div>
        </div>
        {textTip && <span className="textTippict">{textTip}</span>}
      </div>
    );
  }
}
export default PersonalUploadFileForm;