javascript - TypeError:使用 cloudinary 时无法读取未定义的属性“路径”
问题描述
我正在尝试将文件从反应上传到快速服务器。但是我收到这个错误
TypeError:无法读取未定义的属性“路径”
我正在使用 react 将文件传递/上传到服务器。
我引用了一个类似的问题,但它并不特定于响应 js 传递文件
如何修复'TypeError:无法在Nodejs(Multer)中读取未定义的属性'路径'
react 显示选定的图像,因此 react 可以很好地获取图像。
路线/images.js
import express from 'express';
import passport from 'passport';
import multer from 'multer';
import Image from '../models/Image'
import cloudinary from 'cloudinary';
import multipart from 'connect-multiparty';
import var_dump from 'var_dump';
import dd from 'dump-die';
const multipartMiddleware = multipart();
const cloud = cloudinary.v2
const router = express.Router();
const storage = multer.memoryStorage();
const upload = multer({ storage, dest:'uploads/'});
const params = {
width: 250,
height:250,
}
cloudinary.config({
cloud_name: process.env.cloudinaryName,
api_key: process.env.cloudinaryKey,
api_secret: process.env.cloudinarySecret,
})
router.post('/upload', multipartMiddleware, upload.single('image'), (req, res) => {
cloud.uploader.upload(req.file.path, (err, result) => {
// dd(req.files);
if(err){
return res.status(500).send(err);
}
console.log(result);
debugger;
// const img = new Image({
// img_url:result,
// image_title:null
// });
// console.log(img);
// img.save().then( img => {
// return res.status(200).json(img);
// });
});
});
export default router;
反应
import React, { Component } from "react";
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import ImageUploader from 'react-images-upload';
import Axios from '../Axios';
import Image from './Image';
class Dashboard extends Component{
constructor(){
super()
this.state = {
image_url: 'http://www.conservewildlifenj.org/images/artmax_1001.jpg',
selectedFile: null
}
}
// handleChange = file => {
// const img = file[0]
// this.setState({
// selectedFile: img
// })
// debugger;
// }
handleUpload = ( file) => {
const data = new FormData()
const image = file[0]
const image_url = image.name
console.log(image.name);
console.log(this.state.selectedFile);
data.append('file',this.state.selectedFile)
data.append('name',image_url)
// data.append('description', 'some value user types')
Axios.post('/images/upload', data).then((response) => {
console.log(response);
debugger;
this.setState({
image_url: response.data.fileUrl
})
});
}
render(){
return(
<div>
<Grid container justify="center" spacing={16}>
<Grid item sm={8} md={6} style={{ margin: '40px 0px', padding: '0px 30px'}}>
<Typography align="center" variant="h6">
Welcome to the Dashboard
</Typography>
<ImageUploader
withIcon={true}
withPreview={true}
buttonText='Upload an image'
imgExtension={['.jpg', '.gif', '.png', '.gif']}
onChange={this.handleUpload}
maxFileSize={5242880}
/>
<Image image_url={this.state.image_url}/>
</Grid>
{/* Images */}
</Grid>
</div>
)
}
}
export default Dashboard;
解决方案
检查您在 /upload 中发送的数据。它看到 req.file 是未定义的。
推荐阅读
- python - Pandas 循环和追加失败
- c# - 无法访问域控制器时的 WCF Windows 身份验证
- ios - 从 Firebase 获取太慢了
- sql - JSON 对到现有 json 列的行
- azure - 我在哪里可以找到有关我的 Azure VM 预留实例是否已正确分配的信息?
- r - ggplot() 不会将文件保存到文件夹
- postgresql - PSQL 将 CSV 数据复制到 postgres 数据库
- dc.js - 当 dc.js 版本更改时,有没有办法更新使用 dc.js 开发的仪表板
- jquery - 如何访问 ViewData 中项目的值?
- c# - 将屏幕截图从 C# Unity 项目发送到 Python 套接字