【发布时间】：2019-08-25 18:04:44
【问题描述】：
我正在学习 Multer 以及 Redux 和 React。
我的express路由器是这样的
router.post('/upload', addressController.uploadImage);
我的Multer 代码如下所示
const uploadImage = (req, res, next) => {
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, './uploads/');
},
filename: function(req, file, cb) {
cb(null, Date.now() + '-' + file.originalname);
}
});
const fileFilter = (req, file, cb) => {
if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
cb(null, true);
} else {
cb(new Error('Try to upload .jpeg or .png file.'), false);
}
};
const upload = multer({
storage: storage,
limits: {
fileSize: 1024 * 1024 * 5
},
fileFilter: fileFilter
}).single('addressImage');
upload(req, res, function(error) {
if (error) {
// An error occurred when uploading
res.status(500).json({
message: error // I would like to send error from Here.
});
console.log(error);
} else {
if (req.file.filename === res.req.res.req.file.filename) {
res.status(200).json({
message: 'File uploaded',
file: req.file.filename
});
}
return;
}
});
}
我的操作如下所示
export const uploadImage = (formData, id, config) => dispatch => {
return Axios.post('/api/address/upload', formData, config)
.then(response => {
dispatch({
type: 'uploadImage',
payload: response.data
});
})
.catch(error => {
dispatch({
type: 'uploadImage',
payload: error // I would like to pass error through here.
});
return false;
});
};
我的 Reducer 如下所示
const addressReducer = (state = initialState, action) => {
switch (action.type) {
case 'getAddresses': {
return {
...state,
controlModal: action.payload.valueModal,
address: action.payload.addressData
};
}
case 'uploadImage': {
return {
...state,
uploadImage: action.payload
};
}
default:
return state;
}
};
我想在我的组件中得到错误，如下所示
render() {
console.log(this.props.uploadImage);
}
const mapStateToProps = state => ( {
uploadImage: state.addressReducer.uploadImage
} );
export default connect(mapStateToProps)(ModalElement);
我的控制台输出如下所示
当我尝试上传没有 .jpeg 和 .png 扩展名的文件时，如何在我的 React 组件中出现 Try to upload .jpeg or .png file. 错误？
【问题讨论】：
-
它的 500 内部服务器错误所以，你能发布你在服务器端得到的错误日志吗？
-
感谢@VikashSingh。如果我使用此代码
upload(req, res, function(error) { if (error) { console.log(error); // I need to pass this error to React } else { if (req.file.filename === res.req.res.req.file.filename) { res.status(200).json({ message: 'File uploaded', file: req.file.filename }); } return; } });。我得到这个输出i.stack.imgur.com/mJitG.png -
有一个很好的教程可以解决你对 multer 的疑惑，请看一遍：scotch.io/tutorials/express-file-uploads-with-multer我希望这对你有帮助。进一步如果您面临更多挑战，请告诉我。
-
根据屏幕截图，文件验证失败。您是在上传 .jpeg 还是 .png 图像文件？
-
感谢@VikashSingh。我想在 React 组件中获取该文件验证消息。
标签： node.js reactjs express multer