代码之家 › 专栏 › 技术社区 › Dom

张贴新表单数据后无法显示图像

mongodb reactjs

Dom · 技术社区 · 10 月前

Profile.jsx

const Profile = () => {
    const [auth, setAuth] = useAuth()
    const [name, setName] = useState("")
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [phone, setPhone] = useState("");
    const [address, setAddress] = useState("");
    const [photo, setPhoto] = useState("")
    const navigate = useNavigate()

    console.log(photo.path)

    useEffect(() => {
        const { name, email, phone, address, photo } = auth?.user
        setName(name);
        setPhone(phone);
        setEmail(email);
        setAddress(address);
        setPhoto(photo)
    }, [auth?.user])

    const handleSubmit = async(e) => {
        e.preventDefault()

        const data = new FormData()
        data.append("name", name)
        data.append("email", email)
        data.append("password", password)
        data.append("phone", phone)
        data.append("address", address)
        if(photo){
            data.append("photo", photo)
        }
  
        try{
            const res = await axios.put("http://localhost:4000/api/auth/profile", data)
            if(res.data.success) {
                toast(res.data.message,{type: "success", draggable:false})
                navigate("/")
            } else {
                toast(res.data.message,{type: "error", draggable:false})
            }
        } catch(error){
            console.log(error);
            toast("Something Went Wrong",{type: "error", draggable:false})
        }
    }
    return (
    <form onSubmit={handleSubmit}>
          <div className='input-photo'>
                                        {photo && (
                                            <div>
                                                {/* <img src={photo.path} alt='Profile photo' /> */}
                                                <img src={URL.createObjectURL(photo)} alt='Profile photo' />
                                            </div>
                                        )}
                                        <div className="">
                                            <label>
                                                {photo ? photo.name : "Upload Photo"}
                                                <input type='file' name='photo' accept='image/*'
                                                onChange={(e) => setPhoto(e.target.files[0])} hidden />
                                            </label>
                                        </div>
                                    </div>
    </form>
    )
)

控制器/auth.js

export const updateProfileController = async(req,res) => {
    try{
        const { name, email, password, address, phone } = req.body
        const photo = req.files[0]
        const user = await userModel.findById(req.user._id)

        if(password && password.length < 6){
            return res.json({ error: "Password required and 6 characters long"})
        }

        const hashedPassword = password ? await hashPassword(password) : undefined

        console.log(photo)
        const updatedUser = await userModel.findByIdAndUpdate(req.user._id, 
            {
                name: name || user.name,
                email: email || user.email,
                password: hashedPassword || user.password,
                phone: phone || user.phone,
                address: address || user.address,
                photo: photo || user.photo
            },
            { new: true }
        )
    

        res.status(200).send({
            success: true,
            message: "Profile updated successfully",
            updatedUser,
        });
    } catch(error){
        console.log(error);
        res.status(400).send({
            success: false,
            message: "Error while updating profile",
            error,
        });
    }
}

models/user.js

 photo: {
            type: {},
        },

我正在尝试显示保存在MongoDB中的照片,因为我使用了 URL.createObjectURL 以便显示,以便用户可以更改个人资料照片。我想问一下,如何先将照片显示为原始照片,然后当用户点击输入字段时,照片也可以显示出来?

1 回复 | 直到 10 月前

Ninja 10 月前

看起来您正试图在React应用程序中显示用户的个人资料照片,照片最初是从MongoDB中获取的,然后使用文件输入进行更新。您目前正在使用URL.createObjectURL创建一个用于预览照片的临时URL,但您需要一种机制来首先显示服务器上的现有照片,然后在用户选择新照片时显示更新的照片。

为了实现这一点,您应该在初始加载(显示存储在MongoDB中的照片)和用户选择新照片时以不同的方式处理照片URL。

以下是修改代码的方法:

显示MongoDB的初始照片:当您获取用户的个人资料时,照片字段应该包含存储在MongoDB中的照片信息。如果您将照片存储为MongoDB中的路径或URL,则可以直接使用此路径/URL来显示图像。

选择时更新照片预览:当用户选择新照片时,您可以使用URL.createObjectURL创建一个临时URL来预览新照片。

以下是对Profile.jsx组件的调整:

const Profile = () => {
    // ... other states
    const [photo, setPhoto] = useState("");
    const [photoPreview, setPhotoPreview] = useState("");

    useEffect(() => {
        const { name, email, phone, address, photo } = auth?.user;
        setName(name);
        setEmail(email);
        setPhone(phone);
        setAddress(address);
        setPhoto(photo);

        // Set initial photo preview from MongoDB
        if (photo) {
            // Assuming 'photo' contains a URL or path
            setPhotoPreview(photo); 
        }
    }, [auth?.user]);

    const handlePhotoChange = (e) => {
        const file = e.target.files[0];
        setPhoto(file);
        setPhotoPreview(URL.createObjectURL(file));
    };

    // ... handleSubmit remains the same

    return (
        <form onSubmit={handleSubmit}>
            {/* ... other form fields */}
            <div className='input-photo'>
                {photoPreview && (
                    <div>
                        <img src={photoPreview} alt='Profile photo' />
                    </div>
                )}
                <div>
                    <label>
                        {photo ? photo.name : "Upload Photo"}
                        <input type='file' name='photo' accept='image/*'
                        onChange={handlePhotoChange} hidden />
                    </label>
                </div>
            </div>
        </form>
    );
}

在这个修改中,photoPreview用于处理照片的显示。最初,它被设置为MongoDB中的照片URL/路径。当用户选择新照片时,handlePhotoChange会将照片预览更新为新照片的临时URL。

注意:确保服务器正确处理updateProfileController中的照片更新,并且存储在MongoDB中的路径/URL指向客户端可以访问照片的位置。