Блог

Я прочитал несколько сообщений на эту тему, но все еще не могу этого сделать. Я пытаюсь просмотреть изображение при его загрузке

 interface IInternalContactsContainerState {
    isModalOpen?: boolean;
    rows: {}[];
    pictures: {}[];
    file: Blob[];
    imagePreviewUrl: string;
    imagePreview: object;
    images: string;
    setImages: string;
    imgSrc: string;
}

constructor() {
    super({});

    this.state = {
        isModalOpen: false,
        rows: [{}],
        pictures: [],
        file: [],
        imagePreviewUrl: "",
        imagePreview: null,
        images: "",
        setImages: "",
        imgSrc: ""
    };
}
<img src={this.state.imagePreviewUrl} /> // in constructor don't initilazie with array instaed with blank string
<input id="new_post_image" className="file-image" type="file" name="image" accept="image/*" onChange={this.imageChange.bind(this)} ref={(input) => {this.state.pictures[0] = input}} />
<button type="button" className="camera-button" onClick={this.fileUpload.bind(this)}>
    <i className="fas fa-camera"></i>
    <label className="camera-text"><h4 className="camera-text">Image</h4></label>
</button>

private imageChange(e) {
e.preventDefault(); 
let reader = new FileReader();
let file = e.target.files[0];

reader.onloadend = () => {
    this.setState({
    file: file,
    imagePreviewUrl: "" //| ArrayBuffer
    });
}

reader.readAsDataURL(file)
}

fileUpload() {
$("#new_post_image").click();
} 
  

Однако, когда я пытаюсь загрузить, я получаю не изображение, а строку с именем изображения

Есть ли причина для такого поведения?

Вы не обновляете imagePreviewUrl

Попробуйте это:

 reader.onload = function (event) {
    // Add the file name to the data URL
    let dataURL = event.target.result;
    dataURL = dataURL.replace(";base64", `;name=${file.name};base64`);
    this.setState({
        file: file,
        imagePreviewUrl: dataURL
     });
 };