nodejs实现文件上传
2024-10-19 21:35:24
在使用ant-design的upload上传文件时,前端很好实现,那么我们如何实现node服务端呢?
服务端文件上传实现
var express = require('express');
var fs = require('fs');
var path = require('path');
var multipart = require('connect-multiparty');
var router = express.Router();
/* GET App home page. */
router.get('*', function (req, res) {
res.sendFile(path.resolve('./', 'index.html'));
});
router.post('/upload', multipart(), function (req, res) {
//获得文件名
var filename = req.files.files.originalFilename || path.basename(req.files.files.path);
//复制文件到指定路径
var targetPath = './public/uploads/' + filename;
//复制文件流
fs.createReadStream(req.files.files.path).pipe(fs.createWriteStream(targetPath));
//响应ajax请求,告诉它图片传到哪了
res.json({ code: 200, data: { url: 'http://' + req.headers.host + '/public/uploads/' + filename } });
});
前端代码
class ManageWork extends React.Component {
handleUpload(e) {
if (e.file.status === 'done') {
this.setState({ projectImage: e.file.response.data.url })
}
}
render() {
return (
<div>
<Upload name="files" action="/upload" listType="picture"
onChange={e=>this.handleUpload(e)}>
<Button type="ghost">
<Icon type="upload" /> 点击上传
</Button>
</Upload>
<a href={this.state.projectImage} target="_blank" className="upload-example">
<img src={this.state.projectImage} />
<span>缩略图</span>
</a>
</div>
)
}
}
最新文章
- REGEXP 正则的实现两个字符串组的匹配。(regexp)
- jQuery-1.9.1源码分析系列(十) 事件系统——主动触发事件和模拟冒泡处理
- [moka同学笔记]五、Yii2.0课程笔记(魏曦老师教程)[审核功能]
- C# Lamada表达式
- hiho_1053_居民迁移
- 控制文本和外观------Attr Binding(attr属性绑定)
- Base
- listview优化 汇总
- 弹窗开关js
- IOS 学习笔记 2015-03-27 我理解的OC-代理模式
- eclipse 配置Maven问题解决办法:新建maven工程时报错:Could not resolve archetype org.apache.maven.archetypes .
- javascript 闭包基础分享
- 如何把程序钉到Windows7任务栏(修正版)
- php中datetime时间和int时间互相转换
- IF判断条件说明
- async/await处理异步
- Confluence 6 其他 MBeans 和高 CPU 消耗线程
- 如何在不使用try语句的情况下查看文件是否存在
- C++11多线程のfuture,promise,package_task
- 汽车为什么选择了CAN总线技术?