在使用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>
)
} }

nodejs实现文件上传的更多相关文章

  1. NodeJs之文件上传

    NodeJs之文件上传 一,介绍与需求 1.1,介绍 1,multer模块 multer用于处理文件上传的nodejs中间件,主要跟express框架搭配使用,只支持表单MIME编码为multipar ...

  2. Nodejs express 文件上传

    文件上传 以下我们创建一个用于上传文件的表单,使用 POST 方法,表单 enctype 属性设置为 multipart/form-data. index.htm 文件代码修改如下: <html ...

  3. nodejs+multiparty 文件上传

    通过表单提交上传文件:     html代码 <form action="/uploadFile" method="post" enctype=" ...

  4. nodeJs实现文件上传,下载,删除

    转:https://blog.csdn.net/qq_36228442/article/details/81709272 一.简介 本文介绍了nodeJs+express框架下,用multer中间件实 ...

  5. nodejs应用:文件上传

    功能:上传文件到服务器,图片支持客户端本地预览. 服务端 //server.js 'use strict';const http = require('http');const url = requi ...

  6. 【nodejs】文件上传demo实现

    文件结构: index.js var server = require('./server.js'); var router = require('./router.js'); var request ...

  7. Html5+NodeJS——拖拽多个文件上传到服务器

    实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用 ...

  8. Nodejs进阶:基于express+multer的文件上传

    关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...

  9. nodejs学习之文件上传

    最近要做个图片上传的需求,因为服务端春节请假回家还没来,所以就我自己先折腾了一下,大概做出来个效果,后台就用了nodejs,刚开始做的时候想网上找一下资料,发现大部分资料都是用node-formida ...

随机推荐

  1. linux man指令问题

    linux man指令问题 2010-1-13 13:33 提问者: 钟离伊轩 man命令执行时,可加入数值,来限制帮助级别. 这句话对不对啊???? 我记得man page是分章节的..好像可以加数 ...

  2. mysql install steps

    the official documents for mysql 5.6 install key steps: # Preconfiguration setup shell> groupadd ...

  3. python面向对象之类成员

    面向对象编程: OOP编程是利用类和对象来创建各种模型来实现对真实世界的描述,使用面向对象编程的原因一方面是因为它可以使程序的维护和扩展变得简单,并可以大大提高程序开发效率.另外,基于面向对象的程序可 ...

  4. 7、RabbitMQ-主题模式

    1.模式图 发送到主题交换的消息不能具有任意的 routing_key - 它必须是由点分隔的单词列表. 单词可以是任何内容,但通常它们指定与消息相关的一些功能.一些有效的路由键示例:“ stock. ...

  5. docker-8-本地镜像发布到阿里云

    镜像的生成方法 1.前面的DockerFile   2.从容器创建一个新的镜像 docker commit [OPTIONS] 容器ID [REPOSITORY[:TAG]] 将本地镜像推送到阿里云 ...

  6. ethereumjs/merkle-patricia-tree-2-API

    SecureTrie src/secure.js:10-15 Extends Trie 扩展前缀树 You can create a secure Trie where the keys are au ...

  7. HDU 1272小希的迷宫(裸并查集,要判断是否构成环,是否是连通图)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1272 小希的迷宫 Time Limit: 2000/1000 MS (Java/Others)    ...

  8. .NET获取IIS7.0及以上版本托管服务信息

    近期写了个扫描IIS托管站点然后定期注册到Consul的小工具,随意网上拷贝了个帮助类,搞完本机测试没问题,扔到服务器发现硕大的一个异常.. System.Runtime.InteropService ...

  9. [iOS]为git设置代理

    查看本地git配置信息 git config --global -e 查看自己***的代理地址和端口信息 为git添加代理 git config --global http.proxy https:/ ...

  10. [iOS]CIDetector之CIDetectorTypeFace人脸识别

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...