React / Javascript - FileReader /< input /> /添加图片 [英] React/Javascript--FileReader/<input/>/adding image

问题描述

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

I am attempting to set up a default image on a prop that uses FileReader. I want the image to be loaded when the component mounts componentDidMount(){...} and to be used if the user decides not to upload an image. I have been unable to get this to work, please help. avatar is the image I want to use as a default. <ImageUpload /> uses base64url encoding to work. x.img initially is {}. I tried to call _handleImageChange and pass in avatar. I tried to use a defaultValue={avatar} on #profile-img and a few other things that I have since forgotten--but no LUCK. Any insight would be greatly appreciated. THANKS ahead of time! Code below:

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)

推荐答案

唯一可以知道哪种方法允许设置 .files 的属性< input type =file> 元素是设置 .files 属性到 FileList 对象，请参阅在将文件上传到HTML表单并提交之前会发生什么？。

The only possible approach that am aware of which allows setting .files property of <input type="file"> element is to set the .files property to a FileList object, see What happens between uploading a file to an HTML form and submitting it?.

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

The FileList object can be retrieved from the <input type="file"> element .files property itself or .files property of DataTransfer object.

这篇关于React / Javascript - FileReader /&lt; input /&gt; /添加图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！