Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >TypeError:无法读取未定义的“在创建用户时获取此错误”的属性“文件名”

TypeError:无法读取未定义的“在创建用户时获取此错误”的属性“文件名”
EN

Stack Overflow用户
提问于 2021-05-13 09:35:40
回答 1查看 849关注 0票数 1

我正在尝试创建一个用户配置文件图片。我正在使用multer,我不知道如何使用multer --我只是按照文档来做,但是当我尝试创建一个带有配置文件图片的用户时,它会显示一个错误TypeError: Cannot read property 'filename' of undefined。我使用MongoDB,express.js作为后端。

这是我的密码

模型(user.js)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const mongoose = require('mongoose');
const bcrypt = require('bcrypt');

const userSchema = new mongoose.Schema({
    firstName: {
        type: String,
        required: true,
        trim: true,
        min: 3,
        max: 20
    },
    lastName: {
        type: String,
        required: true,
        trim: true,
        min: 3,
        max: 20
    },
    username: {
        type: String,
        required: true,
        trim: true,
        unique: true,
        index: true,
        lowercase: true
    },
    email: {
        type: String,
        required: true,
        trim: true,
        unique: true,
        lowercase: true
    },
    hash_password: {
        type: String,
        required: true
    },
    profilePicture: { type: String }
}, { timestamps: true });

userSchema.virtual('fullName').get(function () {
    return `${this.firstName} ${this.lastName}`
});

userSchema.methods = {
    authenticate: async function (password) {
        return await bcrypt.compare(password, this.hash_password);
    }
};

module.exports = mongoose.model('User', userSchema);

控制器(auth.js)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const User = require('../models/user');
const bcrypt = require('bcrypt');
const shortid = require('shortid');

exports.signup = async (req, res) => {
    User.findOne({ email: req.body.email }).exec(async (error, user) => {
        if (error) return res.status(400).json({ error })
        if (user)
            return res.status(400).json({
                message: "User already registered",
            });

        const { firstName, lastName, email, password } = req.body;
        const hash_password = await bcrypt.hash(password, 10);
        const profilePicture = req.file.filename

        const userSignUp = {
            firstName,
            lastName,
            email,
            hash_password,
            profilePicture: profilePicture,
            username: shortid.generate(),
        }

        const _user = new User(userSignUp);

        _user.save((error, data) => {
            if (error) {
                return res.status(400).json({
                    message: error,
                });
            }

            if (data) {
                return res.status(201).json({
                    message: "user created Successfully..!",
                });
            }
        });
    });
};

路由器(auth.js)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const express = require('express');
const { signup, signin, signout } = require('../controller/auth');
const { validateSignupRequest, isRequestValidated, validateSigninRequest } = require('../../validators/auth');
const router = express.Router();
const path = require('path');
const multer = require('multer');

router.use(express.static(__dirname+ '../../uploads'));

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, '../../uploads')
    }, 
    filename: (req,file, cb) => {
        cb(null, file.filename + "_" + Date.now() + path.extname(file.originalname));
    }
});

const upload = multer({ storage: storage }).single('profilePicture');

router.post('/signup', validateSignupRequest,isRequestValidated,upload,signup);

module.exports = router

index.server.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const express = require('express');
const mongoose = require('mongoose');
const env = require('dotenv');
const cors = require('cors');

const app = express(); 

env.config();

// connecting to mongoose database
mongoose.connect(process.env.DATABASE,
    {
    useNewUrlParser:true, 
    useUnifiedTopology:true,
    useCreateIndex: true,
    useFindAndModify: false
}).then(() => {
    console.log('database connected successfully')
}).catch((err) => {
    console.log(err)
});

// routes
const authRoutes = require('./Home_Search_Client/routes/auth');

// middlewares
app.use(cors());
app.use(express.json());
app.use('/api', authRoutes);


// PORT NUMBER 
app.listen(process.env.PORT, () => {
    console.log(`server is running at port: ${process.env.PORT}`)
});

前端 (React,Redux)

行动(user.action.js)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import axios from '../helpers/axios';
import { userContants } from './constants';

export const signup = (user) => {
    console.log(user)
    return async (dispatch) => {

        dispatch({ type: userContants.USER_REGISTER_REQUEST });
        const res = await axios.post(`/signup`, {
            ...user
        });

        if (res.status === 201) {
            const { message } = res.data;
            dispatch({
                type: userContants.USER_REGISTER_SUCCESS,
                payload: { message }
            });
        } else {
            if (res.status === 400) {
                dispatch({
                    type: userContants.USER_REGISTER_FAILURE,
                    payload: { error: res.data.error }
                });
            }
        }
    }
};

减速器(user.reducer.js)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { userContants } from "../actions/constants"

const initState = {
    error: null,
    message: '',
    loading: false
}

export default (state = initState, action) => {
    switch (action.type) {
        case userContants.USER_REGISTER_REQUEST:
            state = {
                ...state,
                loading: true
            }
            break;
        case userContants.USER_REGISTER_SUCCESS:
            state = {
                ...state,
                loading: false,
                message: action.payload.message
            }
            break;
        case userContants.USER_REGISTER_FAILURE:
            state = {
                ...state,
                loading: false,
                error: action.payload.error
            }
            break;
    }

    return state;
}

集装箱(Signup.js)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Button, Col, Container, Form, Row } from 'react-bootstrap'
import Layout from '../../Components/Layout'
import Input from '../../Components/UI/Input'
import { signup } from '../../actions'
import { Redirect } from 'react-router-dom';

const Signup = (props) => {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [profilePicture, setProfilePicture] = useState('');
    const auth = useSelector((state) => state.auth)
    const user = useSelector((state) => state.user)
    const dispatch = useDispatch();

    useEffect(() => {
        if(!user.loading){
            setFirstName('');
            setLastName('');
            setEmail('');
            setPassword('');
            setProfilePicture('')
        }
    }, [user.loading]);

    const userSignup = (e) => {
        e.preventDefault();
        const user = {
            firstName,
            lastName,
            email,
            password,
            profilePicture
        };
        dispatch(signup(user));
        console.log(user)
    };

    if(auth.authenticate) {
        return <Redirect to={'/'} />
    }

    if(user.loading) {
        return <p>Loading...</p>
    }

    const handleProfilePicture = (e) => {
        setProfilePicture(e.target.files[0]);
    }

    return (
        <Layout>
            <Container>
                {user.message}
                <Row>
                    <Col md={{ span:6, offset:3 }}>
                        <Form onSubmit={userSignup}>
                            <Row>
                                <Col md = {6}>
                                    <Input 
                                        label = 'First Name'
                                        placeholder='First Name'
                                        value= {firstName}
                                        type='text'
                                        onChange={(e) => setFirstName(e.target.value)}
                                    />
                                </Col>
                                <Col md = {6}>
                                    <Input 
                                        label = 'Last Name'
                                        placeholder='Last Name'
                                        value= {lastName}
                                        type='text'
                                        onChange={(e) => setLastName(e.target.value)}
                                    />
                                </Col>
                            </Row>
                            
                            <Input
                                label='Email'
                                placeholder='Email'
                                value={email}
                                type='email'
                                onChange={(e) => setEmail(e.target.value)}
                            />
                            <Input
                                label='Password'
                                placeholder='Password'
                                value={password}
                                type='password'
                                onChange={(e) => setPassword(e.target.value)}
                            />

                            
                            <input type="file" name= 'profilePicture' onChange={handleProfilePicture} />

                            <Button variant='primary' type='submit' >
                                Submit
                            </Button>

                        </Form>
                    </Col>
                </Row>
            </Container>
        </Layout>
    )
}

export default Signup
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-14 08:40:54

要从前端发送文件和其他数据,您需要使用FormData API。对于user对象和axios,我会这样做:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const formData = new FormData();

// Append all properties of the `user` object to the form
for (const [key, value] of Object.entries(user)) {
  formData.append(key, value);
}

const response = await axios.post('/signup', formData, {
  headers: {
    // Multer only parses "multipart/form-data" requests
    'Content-Type': 'multipart/form-data',
  },
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67523697

复制
相关文章
”在禁用UAC时,无法激活此应用“问题
重装完系统后,打开图片、PDF书籍或是其他一些东西的时候,总是会出现“在禁用UAC时,无法激活此应用”的问题。
全栈程序员站长
2022/08/09
6.4K0
”在禁用UAC时,无法激活此应用“问题
Java-方法重载时 调用未定义的对象属性
public class TestWayReload { int id; String name; String pwd; public TestWayReload(){ System.out.println(“Hellow World!”); System.out.println("################"); }
Fisherman渔夫
2019/07/30
5.5K0
TypeError: 'module' object is not callable (pytorch在进行MNIST数据集预览时出现的错误)
在使用pytorch在对MNIST数据集进行预览时,出现了TypeError: 'module' object is not callable的错误:
陶陶name
2022/05/12
2K0
无法获取unionid时判断是否是同一用户的方法
用户在每个应用都有一个openid,如果想打通账号体系就必须注册微信开放平台,关联公众号或者小程序才能获取unionid来唯一区分用户。
薛定喵君
2021/03/12
1K0
Python迭代DataLoader时出现TypeError: Caught TypeError in DataLoader worker process 0.错误。
迭代 DataLoader时出现以下错误,暂时不知道怎么解决,向大家求救,是一个比较稀罕的错误,也分享给大家一个奇葩的问题一起讨论。
全栈程序员站长
2022/08/22
3.9K0
1000个项目中前10名的JavaScript错误介绍
为了回馈我们的开发者社区,我们查看了数千个项目的数据库,发现了 JavaScript 中频度最高的 10 种错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生。如果你能够避免落入这些 “陷阱”,你将会成为一个更好的开发者。 数据才是王道,我们收集并分析了出现频次排前 10 的 JavaScript 错误。 Rollbar 会收集每个项目的所有错误,并总结每个错误发生的次数。我们通过根据 “指纹”(rollbar 用到的一种算法,详见:https://rollbar.com/docs/gr
程序你好
2018/07/20
6.2K0
10 种最常见的 Javascript 错误
英文:SKOWRONSKI 译文:elevenbeans elevenbeans.github.io/2018/02/05/top-10-javascript-errors/ 为了回馈我们的开发者社区,我们查看了数千个项目的数据库,发现了 JavaScript 中频度最高的 10 种错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生。如果你能够避免落入这些 “陷阱”,你将会成为一个更好的开发者。 数据才是王道,我们收集并分析了出现频次排前 10 的 JavaScript 错误。 Rollb
前端教程
2018/03/05
6.8K0
10 种最常见的 Javascript 错误
10 种 JavaScript 最常见的错误
查看了数千个项目后,发现了 10 个最常见的 JavaScript 错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生。如果你能够避免落入这些 “陷阱”,你将会成为一个更好的开发者。
小生方勤
2019/06/26
8.6K0
10 种 JavaScript 最常见的错误
1000多个项目中的十大JavaScript错误以及如何避免
通过统计数据库中的1000多个项目,我们发现在 JavaScript 中最常出现的错误有10个。下面会向大家介绍这些错误发生的原因以及如何防止。 对于这些错误发生的次数,我们是通过收集的数据统计得出的
葡萄城控件
2018/03/27
8.4K0
1000多个项目中的十大JavaScript错误以及如何避免
1000多个项目中的十大JavaScript错误以及如何避免
通过统计数据库中的1000多个项目,我们发现在 JavaScript 中最常出现的错误有10个。下面会向大家介绍这些错误发生的原因以及如何防止。
一墨编程学习
2018/10/20
6.2K0
解决集成jpa时无法创建entityManagerFactory的问题
最近将IDEA 2018.1版本更新到了2018.2版本,更新好后跑了一下之前的项目,结果就报错了,这个项目集成了spring data jpa。由于该错误有多种原因导致,在解决该错误的时候也花了一些时间,所以特别记录一下。关键的报错信息如下:
端碗吹水
2020/09/23
3.2K0
[Centos7]open读取文件报错:TypeError
本文编写于 205 天前,最后修改于 205 天前,其中某些信息可能已经过时。 在写对比文件差异的脚本时,运行脚本报错: TypeError: a bytes-like object is required, not ‘str’ 处理方法如下: 1.使用codecs模块 2.原代码为: fileHandle = open(filename, 'rb') #此写法用于python2.x版本,因为我的版本为python3.6,所以需要做以下更改 3.更改后的代码为 import codecs fileHandl
贰叁壹小窝
2020/07/22
1K0
jackson设置读取属性时使用大写序列化属性时使用小写
jackson是一种使用广泛的json序列化库,虽然性能上可能不如fastjson,但是从其标准性以及安全性上来看(近一年爆出了不少fastjson的漏洞),下面就介绍下本文的主题,jackson序列化以及反序列化时可能用到的几个注解:
johnhuster的分享
2022/03/28
1.3K0
【MATLAB】基本绘图 ( 句柄值 | 对象句柄值获取 | 创建对象时获取句柄值 | 函数获取句柄值 | 获取 / 设置 对象属性 | 获取对象属性 )
对象的句柄值 , 类似于编程时的引用 , 将对象的句柄值赋值给变量后 , 该变量就可以代表指定的绘图对象 ;
韩曙亮
2023/03/29
6.7K0
【MATLAB】基本绘图 ( 句柄值 | 对象句柄值获取 | 创建对象时获取句柄值 | 函数获取句柄值 | 获取 / 设置 对象属性 | 获取对象属性 )
php处理pathinfo()方法获取中文文件名错误的方法
首先这是这个方法本身的一个bug。 简单粗暴的解决办法就是直接在文件名前加上一个英文字符,再截取。 即: substr(pathinfo("_{$file['name']}", PATHINFO_FILENAME), 1);
槽痞
2020/06/23
1.7K0
通过反射方式无法获取对象属性
最近在一个项目上开发的接口与业务方联调时计算参数签名总是对不上,经过排查后定位到原因: 1.父类定义的属性列表,全部为public类型 2.子类中未定义新的属性,所有属性都继承自父类 3.在计算签名时传递的是子类对象,子类对象使用反射方式调用getDeclaredFields()方法无法获取到从父类继承的属性
编程随笔
2021/12/21
2.9K0
vue在IE下无法正常工作,Promise未定义?
用vue写了一个日历组件,在Firefox、Edge、Chrome以及360等浏览器极速模式中运行一切正常,如图:
Yiiven
2022/12/15
4.2K0
vue在IE下无法正常工作,Promise未定义?
java读取文件获取文件名多线程移动文件
一、需求说明 一个目录里边有 47W个文件,现在需要根据一个文本文件里边的文件名称 在47W个文件中取出24W个有效文件(根据文本文件里边的文件名取) 二、设计思路 1、使用 BufferedReader 逐行读取文本文件,并存入LinkList 2、使用定长线程池并行处理移动文件 三、实现代码 package com.xtd.file.gash.general; import java.io.*; import java.util.LinkedList; import java.util
静谧星空TEL
2021/04/27
9320
【Linux系列】无法创建用户useradd:无法打开 /etc/passwd
事情起因源自阿里云服务上安装ES(elasticsearch),学习ES的路上可能都会遇到的一个问题,就是无法在root账户下启动ES服务,具体报错信息如下:
沁溪源
2021/08/13
7.4K0
点击加载更多

相似问题

获取此错误:"TypeError:无法读取未定义的属性'setState‘“

24

Actions获取此错误TypeError:无法读取未定义的属性“输出”

20

TypeError:无法读取未定义的属性“”then“”--在使用then时出现此错误

17

获取此映射:无法读取未定义的属性‘TypeError’

223

TypeError:无法读取未定义的属性(读取'getBalance') -在试图获得地址余额时获取此错误

214
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文