React-圖片輸入框-移動端網頁_018

React-圖片輸入框-移動端網頁

• gitHub地址 以爲有參考價值，點個贊

https://github.com/xiaopingzh...

目錄結構

.
├── 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

上傳組件代碼

基於原生的API接口，點擊輸入輸入框 手機上會出現 文件 相機選項
可自行選擇拍照上傳，
爲解決微信內置上傳的bug 其中accept 設置爲 accept="image/*"

loading組件找了一個簡單的動效

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

來源

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('請選擇圖片',"error");
        return false;
      }
      if (file.size > 8000000){
        toast('圖片太大,請從新選擇',"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;

• 初試界面

— 選擇圖片

-上傳失敗提示

• 上傳中

• 上傳成功

• 微信內置瀏覽器打開