如何使用Node JS从react js上传文件"/>
如何使用Node JS从react js上传文件
我有一个react js应用程序。我将使用Node Js从react js上传文件。我尝试了下面的代码,但是它显示错误消息为“未指定默认引擎,也没有提供扩展名。 “
请检查下面的代码以与节点js反应并建议如何解决此问题。
设置文件的初始状态:-
this.state = {
selectedFile: null
}
this.formData = {
file : ''
}
上传文件:-
UploadHandler = () => {
this.formData.file = this.state.selectedFile;
console.log(this.formData.file);
axios.post('localhost:5000/ap/v1/Users/',this.formData,{headers: {'Content-Type': 'multipart/form-data'}})
.then(res => {
//this.props.history.push('/UserList')
})
}
}
当我们从浏览器中选择文件时将文件设置为状态:-
fileHandler = (evt) => {
console.log(evt.target.files[0]);
const f = evt.target.files[0];
this.setState({
selectedFile: evt.target.files[0],
loaded: 0,
})
if (f) {
const reader = new FileReader();
reader.onload = ({ target: { result } }) => {
this.setState({preview:result});
};
reader.readAsDataURL(f); // you can read image file as DataURL like this.
} else {
this.setState({preview:null});
}
};
render:-
render() {
return (
<div className="col-sm-2">
{/* <img className='img-fluid' src={ users } alt='Alt text'/> */}
<div>
<img className='img-fluid' src={this.state.preview} />
<br></br>
<input
type="file"
accept="image/*"
width="90px"
color="transparent"
onChange={this.fileHandler}
/>
</div>
</div>
</div>
);
}
Node JS代码:-
var multer = require('multer')
// Set The Storage Engine
const storage = multer.diskStorage({
destination: './public/uploads/',
filename: function(req, file, cb){
cb(null,file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
// Init Upload
const upload = multer({
storage: storage,
limits:{fileSize: 1000000}, //Size in bytes
fileFilter: function(req, file, cb){
checkFileType(file, cb);
}
}).single('file');
// Check File Type
function checkFileType(file, cb){
// Allowed ext
const filetypes = /jpeg|jpg|png|gif/;
// Check ext
const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
// Check mime
const mimetype = filetypes.test(file.mimetype);
if(mimetype && extname){
return cb(null,true);
} else {
cb('Error: Images Only!');
}
}
exports.createUsers = async (req, res, next) => { // this is an upload controller
try {
upload(req, res, (err) => {
console.log('upload in');
if(err){
res.render('index', {
msg: err
});
} else {
if(req.file == undefined){
res.status(400).json({
msg: 'Error: No File Selected!'
});
} else {
res.status(200).json({ success: true, msg: 'File Uploaded!', file: `uploads/${req.file.filename }`});
}
}
})
} catch (error) {
console.log(error);
res.status(400).json({ error: error });
}
}
回答如下:我认为您尚未将view_engine
设置为express
。未设置app.set('view engine', 'jade');
。这是因为当您尝试在下面的代码中使用render
时,它将寻找一个。
更多推荐
如何使用Node JS从react js上传文件
发布评论