Question

我使用express-fileupload在mongodb上上传图像：

server.js

const fileUpload = require('express-fileupload');
app.use(fileUpload())

然后在用于上载路由的控制器中，将image属性的值更改为我从react前端选择的任何值：

upload.controller.js

const avatar = (req, res) => {
    const file = req.files.file;

    User.findByIdAndUpdate(
        req.params.uid, 
        { $set: { 
            avatar: { 
                fileName: file.name, 
                filePath: `public/uploads/${file.name}` }
            }
        }, 
        { new: true, upsert: true })
            .exec((error, user) => {
                if (error) {
                    return res.status(400).json({
                        message: error.message,
                    });
                }

                if (req.files === null) {
                    return res.status(400).json({
                        message: 'No file uploaded',
                    });
                }

                file.mv(`public/uploads/${file.name}`, error => {
                    if (error) {
                        return res.status(500).json({
                            message: error.message,
                        });
                    }

                    res.status(200).json({
                        user,
                    });
                })
            });
};

然后在React中，我向相应的路由发送一个放置请求，并将响应保存到本地存储中： isAuthenticated（）是一个返回存储在本地存储中的obj的函数

const [selectedFile, setSelectedFile] = React.useState(isAuthenticated().avatar);

const fileSelectedHandler = evt => setSelectedFile(evt.target.files[0]);

    const uploadProfileImage = async evt => {
        evt.preventDefault();

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

        try {
            const response = await axios.put(`${keys.SERVER_URL}/avatar/${isAuthenticated()._id}`, formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                }
            }); 

            localStorage.setItem(localStorageName, JSON.stringify({ ...isAuthenticated(), avatar: response.data.user.avatar }));
            console.log(response)
        } catch (error) {
            console.log(error.response.data.message);
        }
    }

然后，我想通过引用保存到本地存储的路径来显示图像，如下所示：

<div className="App_profile_avatar">
                        <img src={`../..${selectedFile.filePath}`} />

                            <form onSubmit={uploadProfileImage}>
                                <input type="file" name="profile-image" onChange={fileSelectedHandler} id='profileImage' />
                                <input type="submit" value='Upload' />
                            </form>
                            <span>Add Photo</span>
                            {/* <i className="fas fa-pen"></i> */}
                    </div>

我在mongodb提供的localStorage中具有此属性：

{
    avatar: {
        fileName: "eye.jpg",
        filePath: "./client/public/uploads/eye.jpg"
    }
}

如何在我的react组件中引用存储在mongodb中的路径？

0 个答案: