node.js - 无法使用 Multer、React、Node.js、Sequelize、PostgreSQL 访问上传的照片

Question

我试图让用户可以点击默认头像并上传他们自己的图像。我能够成功地将文件上传到数据库，但我无法从客户端访问它。我不确定我是否正确存储它。我该如何解决这个问题？
客户端:

import React, { useEffect } from 'react';
import Navbar2 from './Navbar2';
import {
    ProfileContainer,
    ProfileCard,
    Special,
    FileForm,
    FileLabel,
    File,
} from './styled-components/ProfileStyles';
import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { toast } from 'react-toastify';

import { useSelector, useDispatch } from 'react-redux';

import { setProfileInfo } from '../actions/profileInfo-actions';

export default function Profile() {
    const dispatch = useDispatch();
    const profileInfo = useSelector(
        (state) => state.profileInfo
    );
    const userInfo = useSelector((state) => state.userInfo);

    useEffect(() => {
        setProfileInfo(dispatch);
    }, []);

    const changeProfilePic = async (e) => {
        const file = e.target.files[0];
        const data = new FormData();
        data.append('file', file);
        if (file) {
            if (file.size < 1572864) {
                if (
                    file.type === 'image/jpeg' ||
                    file.type === 'image/png'
                ) {
                    const response = await fetch(
                        'http://localhost:4001/user/profile-pic',
                        {
                            method: 'PUT',
                            headers: { token: localStorage.token },
                            body: data,
                        }
                    );
                    if (response) {
                        console.log(response);
                        toast.info('Profile Photo Changed');
                    }
                } else {
                    toast.error('File type must be jpeg or png');
                }
            } else {
                toast.error('File size is too large');
            }
        }
    };

    return (
        <>
            <Navbar2 />
            <ProfileContainer>
                <ProfileCard>
                    <FileForm>
                        <FileLabel htmlFor='pp-upload'>
                            {profileInfo.profileImage == null ? (
                                <Avatar
                                    size={180}
                                    icon={<UserOutlined />}
                                />
                            ) : (
                                <img
                                    src={profileInfo.profileImage}
                                    alt=''
                                />
                            )}
                        </FileLabel>
                    </FileForm>
                    <File
                        type='file'
                        name='profileImage'
                        id='pp-upload'
                        onChange={changeProfilePic}
                    />
                </ProfileCard>
            </ProfileContainer>
        </>
    );
}

服务器端:

const router = require('express').Router();
const { User, Profile } = require('../models');
const authorization = require('../middleware/authorization');
const path = require('path');
const multer = require('multer');

const upload = multer({ dest: '../public/uploads/' });

router.put(
    '/profile-pic',
    authorization,
    upload.single('file'),
    async (req, res) => {
        const user = await Profile.findOne({
            where: {
                userId: req.user,
            },
        });

        const { file } = req;
        const profileImage =
            file.fieldname +
            '-' +
            Date.now() +
            path.extname(file.originalname);
        user.update({ profileImage });
        res.status(200).json({
            status: true,
        });
    }
);

数据库架构:

'use strict';
const { Model } = require('sequelize');
module.exports = (sequelize, DataTypes) => {
    class Profile extends Model {
        static associate(models) {
            Profile.belongsTo(models.User, {
                foreignKey: 'userId',
                onDelete: 'CASCADE',
            });
        }
    }
    Profile.init(
        {
            bio: DataTypes.STRING,
            profileImage: DataTypes.STRING,
            userId: DataTypes.INTEGER,
        },
        {
            sequelize,
            modelName: 'Profile',
        }
    );
    return Profile;
};

Answer 1

您可以使用 asp 页面在二进制响应中写入图像。

<% 

Set Conn = Server.CreateObject("ADODB.Connection")

Set RS = Server.CreateObject("ADODB.Recordset")

Conn.Open("DSN=; User ID=; password=")
sql = "*select image here*"
RS.Open sql, Conn, adOpenForwardOnly

If Not RS.EOF Then
                Response.Expires = 0
                Response.Buffer = TRUE

                Response.Clear
                
                If InStr(RS("REGIMG"),".bmp")>0 Then

                              Response.ContentType = "image/bmp"

               ElseIf InStr(RS("REGIMG"),".jpg")>0 Then

                              Response.ContentType = "image/jpeg"

               ElseIf InStr(RS("REGIMG"),".gif")>0 Then

                              Response.ContentType = "image/gif"

               ElseIf InStr(RS("REGIMG"),".tif")>0 Then

                              Response.ContentType = "image/tiff"

               ElseIf InStr(RS("REGIMG"),".png")>0 Then

                              Response.ContentType = "image/png"

               ElseIf InStr(RS("REGIMG"),".svg")>0 Then

                              Response.ContentType = "image/svg+xml"

               End If
                
Response.BinaryWrite RS("REGIMGIMG")
End If
%>