文件上传到后台后如何刷新页面？

Question

我有一个个人资料编辑屏幕，允许用户使用 React 为我的前端更新个人资料图像和个人资料横幅图片。成功上传用户图片后，客户端会收到一条消息，显示“个人资料图片上传成功”或“横幅图片上传成功”，具体取决于按下的按钮。然而，一旦图片上传完毕，用户目前需要点击刷新浏览器按钮才能看到更新后的图片。如何做到上传完成，用户收到响应信息后，浏览器自动刷新，用户不需要点击刷新按钮？任何帮助将不胜感激，谢谢！

EditProfile.jsx:

import '../../components/pages/styles/EditProfile.css';
import {useEffect, useState} from 'react';
import {useSelector} from 'react-redux';
import UserProfileService from '../../services/user-profile.service';
import {upload} from '../../services/upload.service';
import {FileUploader} from '../../components/FileUploader';
import axios from 'axios';
import authHeader from '../../services/auth-header';
const API_URL = 'http://localhost:8080/api';

const EditProfile = () => {
    const {user: currentUser} = useSelector((state) => state.auth);
    const [file, setFile] = useState();
    const [description, setDescription] = useState('');
    const [loading, setLoading] = useState(false);
    const [content, setContent] = useState('');
    const [photoURL, setPhotoURL] = useState('/images/user-solid.jpeg');
    const [bannerURL, setBannerURL] = useState('/images/default-header.png');
    const [data, setData] = useState();
    const [preview, setPreview] = useState(null);

    useEffect(() => {
        UserProfileService.getProfile().then(
            (response) => {
                if (response.data.profile_img)
                    setPhotoURL(response.data.profile_img_complete);
                if (response.data.profile_banner)
                    setBannerURL(response.data.profile_banner_complete);
            },
            (error) => {
                const _content =
                    (error.response &&
                        error.response.data &&
                        error.response.data.message) ||
                    error.message ||
                    error.toString();
                setContent(_content);
            }
        );
    }, []);

    const onAddImage = (file) => {
        window.URL.revokeObjectURL(preview);
        if (!file) return;
        setPreview(window.URL.createObjectURL(file));
        setFile(file);
    };

    const profileImageSubmit = async (event) => {
        event.preventDefault();

        const formData = new FormData();
        formData.append('file', file);

        const result = await axios
            .post(API_URL + '/profile-image/upload', formData, {
                headers: {...authHeader(), 'Content-Type': 'multipart/form-data'},
            })
            .then((res) => setData(res.data));
    };

    const profileBannerSubmit = async (event) => {
        event.preventDefault();

        const formData = new FormData();
        formData.append('file', file);

        const result = await axios
            .post(API_URL + '/banner/upload', formData, {
                headers: {...authHeader(), 'Content-Type': 'multipart/form-data'},
            })
            .then((res) => setData(res.data));
    };

    return (
        <div className='page'>
            <div className='profile-container'>
                <div className='profile-card'>
                    <header className='profile-name-header'>
                        <h3>
                            <strong id='profile-name'>{currentUser.username} Profile</strong>
                        </h3>
                    </header>
                    <img src={photoURL} alt='Avatar' className='avatar'></img>
                    <img src={bannerURL} alt='Banner' className='banner'></img>
                    <div className='profile-form-container'>
                        <p id='profile-form-label'>Update your Profile Picture</p>
                        <form
                            onSubmit={profileImageSubmit}
                            className='upload-form'
                        >
                            <input
                                filename={file}
                                onChange={(e) => onAddImage(e.target.files[0])}
                                type='file'
                                accept='image/*'
                                className='profile-image-selector'
                                id='image-selection-btn'
                            ></input>
                            <button type='submit' id='data-upload-btn'>
                                Submit
                            </button>
                        </form>
                        <p id='profile-form-label'>Update your Profile Banner</p>
                        <form
                            onSubmit={profileBannerSubmit}
                            className='upload-form'
                        >
                            <input
                                filename={file}
                                onChange={(e) => onAddImage(e.target.files[0])}
                                type='file'
                                accept='image/*'
                                className='profile-image-selector'
                                id='image-selection-btn'
                            ></input>
                            <button type='submit' id='data-upload-btn'>
                                Submit
                            </button>
                        </form>
                    </div>
                    {data && (
                        <div className='post-message'>
                            <div
                                className={data ? 'alert post-success' : 'alert post-danger'}
                                role='alert'
                            >
                                {data.message}
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default EditProfile;

Answer 1

您可以使用 JavaScript location.reload

window.location.reload(false);

您也可以像这样在几秒后使用 setTimeout 重新加载：

    const profileBannerSubmit = async (event) => {
    event.preventDefault();

    const formData = new FormData();
    formData.append('file', file);

    const result = await axios
        .post(API_URL + '/banner/upload', formData, {
            headers: {...authHeader(), 'Content-Type': 'multipart/form-data'},
        })
        .then((res) => setData(res.data))
        .then((res) => { setTimeout(() => {
                            window.location.reload(false);
                        }, 2000)

             })
     };

此外，即使不需要重新加载页面，您也可以简单地在 profileBannerSubmit() 和 profileImageSubmit() 中调用 getProfile() 函数，这会将调用发送到 api 以获取用户的最新详情。