Question

我对ReactJs很陌生并且正在开发一个上传图像数据文件，将其转换为url并将其存储到localStorage的项目。选择文件后，将显示图像。这部分正在运作。

但是，当我尝试使用localStorage.getItem（“ProfileImage”）重新显示文件时，图像将不会显示。此外，如果我进行硬刷新，即使状态重置，图像预览也会消失。想知道是否有人可以帮我告诉我可能出错的地方：

import React, { Component } from 'react'

class ProfilePhoto extends Component {

    constructor(props) {
        super(props)

        this.state = {
            imgUrl: JSON.parse(localStorage.getItem("ProfileImage")) || []
        }
    }

    handleImageUpload = function (e) {

        //get the image file
        const selectedFile = e.target.files[0]

        //need to convert to acceptable format for posting...
        const imgData = window.URL.createObjectURL(selectedFile)

        //const ActiveUser = JSON.parse(localStorage.getItem("ActiveUser"))

        localStorage.setItem("ProfileImage", JSON.stringify(imgData))

        this.setState({
            imgUrl: imgData
        })

        console.log(imgData)

    }.bind(this)

    handleImageSave = function (e) {
        e.preventDefault();
        alert("Your profile image has saved!")

    }.bind(this)

    componentDidMount() {

     let ProfileImage = JSON.parse(localStorage.getItem("ProfileImage"))
     console.log(ProfileImage)

    }


    render() {

        return (
            <div className="profile-photo">
                <div className="img-preview">
                    <img src={this.state.imgUrl} alt="" />
                </div>

                <form id="myPhotoForm" name="myPhotoForm" onSubmit={this.handleImageSave}>
                    <input type="file" id="imgUrl" name="imgUrl" onChange={this.handleImageUpload} />
                    <button type="submit" value="Submit!">Upload</button>
                </form>
            </div>
        )
    }
}

export default ProfilePhoto

Answer 1

试试这个

localStorage.setItem("ProfileImage", JSON.stringify(imgData).blob)

使用ReactJS从本地存储加载后，不会显示配置文件图像

1 个答案: