React/Javascript--FileReader/<；输入/>/添加图像

我试图在使用FileReader的道具上设置默认图像。我希望在组件装载时加载映像

componentDidMount（）{…}

，并在用户决定不上载映像时使用。我一直无法让它工作，请帮忙

avatar

是我想要用作默认设置的图像<代码>使用base64url编码工作

x.img

最初是

{}

。我试着呼叫

\u handleImageChange

并传入

化身

。我试着在

#profile img

上使用

defaultValue={avatar}

，还有一些我后来忘记的东西——但没有运气。如有任何见解，将不胜感激。提前谢谢！代码如下：

import React from 'react';
import {connect} from 'react-redux';
import './imageupload.css';
import {addImg} from '../../actions/index2';
import avatar from './avatar.jpg';



export class ImageUpload extends React.Component {
constructor(props) {
  super(props)
  this.state = {
    img:{}
  };
  this._handleImageChange = this._handleImageChange.bind(this);
  this._makeFile = this._makeFile.bind(this);
}

componentDidMount() {

}

_handleImageChange(e) {
    e.preventDefault();
    let reader = new FileReader();
    let file = e.target.files[0];
    console.log('e.target.files[0]', e.target.files[0] )
    reader.onloadend = () => {

        let serializedFile = {
            lastModified: file.lastModified,
            lastModifiedDate:file.lastModifiedDate,
            name:file.name,
            size:file.size,
            type:file.type,
            webkitRelativePath:file.webkitRelativePath
        }
        this.props.dispatch(addImg({ 
            file: serializedFile,
            imagePreviewUrl: reader.result
        }))
        if (this.props.moveImg) {
            this.props.moveImg({
            file: serializedFile,
            imagePreviewUrl: reader.result
        })
        }
    }
  reader.readAsDataURL(file)
}

render() {
  let x = this.props;
  let {imagePreviewUrl} =  x.img   ;
  let $imagePreview = null;
  if (imagePreviewUrl ) {
    $imagePreview = (<img id='img-preview' alt='file to upload'  src={imagePreviewUrl} />);
  }

  return (
    <div>
        <input id='profile-img' type="file"  onChange={this._handleImageChange } />
      {$imagePreview}
      <button onClick={()=>console.log(this.props)}>see state</button>
    </div>
  )
}

  }

  export const mapStateToProps = state => {
  return {
    img:state.oneReducer.img
  }
  }

  export default connect(mapStateToProps)(ImageUpload)

从“React”导入React；
从'react redux'导入{connect}；
导入“/imageupload.css”；
从“../../actions/index2”导入{addImg}；
从“./avatar.jpg”导入化身；
导出类ImageUpload扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
img:{}
};
this.\u handleImageChange=this.\u handleImageChange.bind（this）；
this.\u makeFile=this.\u makeFile.bind（this）；
}
componentDidMount（）{
}
_handleImageChange（e）{
e、 预防默认值（）；
let reader=new FileReader（）；
让file=e.target.files[0]；
console.log（'e.target.files[0]”，e.target.files[0]）
reader.onloadend=（）=>{
让序列化文件={
lastModified:file.lastModified，
lastModifiedDate:file.lastModifiedDate，
name:file.name，
size:file.size，
type:file.type，
webkitRelativePath:file.webkitRelativePath
}
this.props.dispatch（addImg（{
文件：序列化文件，
imagePreviewUrl:reader.result
}))
if（this.props.moveImg）{
这个。道具。移动({
文件：序列化文件，
imagePreviewUrl:reader.result
})
}
}
reader.readAsDataURL（文件）
}
render（）{
设x=this.props；
设{imagePreviewUrl}=x.img；
让$imagePreview=null；
如果（imagePreviewUrl）{
$imagePreview=（）；
}
返回(
{$imagePreview}
console.log（this.props）}>查看状态
)
}
}
export const mapStateToProps=state=>{
返回{
img:state.oneReducer.img
}
}
导出默认连接（mapStateToProps）（图像上载）

我知道的唯一可能的方法是设置

元素的

.files

属性，将

.files

属性设置为

文件列表

对象，请参阅

文件列表

对象可以从

元素

.files

属性本身或

数据传输

对象的

.files

属性中检索