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/*"加载组件，找个简单的。动态npm配置集'@bit:registry'https://node.bit.devnpmi@bit/davidhu2000.react-spinners.pulse-loader来自https://bit.dev/davidhu2000/r...importReactfrom'react';import'./PersonalUploadFileForm.css';importtoastfrom'../Notice/Notice';importPulseLoader来自“@bit/davidhu2000.react-spinners.pulse-loader”；类PersonalUploadFileFormextendsReact.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();让阅读器=新文件阅读器（）；让文件=e.target.files[0];reader.onloadend=()=>{if(file.type!='image/jpeg'&&file.type!='image/png'){toast('请选择图片',"error");返回假；}if(file.size>8000000){toast('图片太大,请重新选择',"error");返回假；}this.setState({filePreviewUrl:rea结果,});this.props.onChange({name:file.name,base64:reader.result});};reader.readAsDataURL（文件）；e.target.value=null;};render(){让{filePreviewUrl}=this.state;let{backimg,textTip,displaybackimg,uploading}=this.props;返回（-loading"style={{backgroundImage:`url(${filePreviewUrl})`,opacity:"0.7"}}>
