Question

我正在尝试在使用FileReader的道具上设置默认图像。我希望在组件安装componentDidMount(){...}时加载图像，并在用户决定不上传图像时使用。我无法让这个工作，请帮忙。 avatar是我想用作默认图片的图片。 <ImageUpload />使用base64url编码。 x.img最初为{}。我尝试拨打_handleImageChange并传入avatar。我尝试在defaultValue={avatar}上使用#profile-img以及我忘记的其他一些事情 - 但没有运气。任何见解将不胜感激。谢谢提前！代码如下：

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)

Answer 1

了解允许设置.files元素的<input type="file">属性的唯一可行方法是将.files属性设置为FileList对象，请参阅{{3 }}

可以从FileList元素<input type="file">属性本身或.files对象的.files属性中检索DataTransfer对象。

React / Javascript - FileReader / <input /> /添加图像

1 个答案: