在使用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. c#listbox使用详解和常见问题解决

    关于ListBox ListBox是WinForm中的 列表 控件,它提供了一个项目列表(一组数据项),用户可以选择一个或者多个条目,当列表项目过多时,ListBox会自动添加滚动条,使用户可以滚动查 ...

  2. Linux中脚本的使用方法

    Linux中脚本的使用方法 一.前言 关于Linux中的脚本的用法,一直没有时间去好好地总结,正好今天下雨,就好好的整理一下思路吧,其实精通了一门语言,比如C语言,学习其他语言需要的成本是非常少的,同 ...

  3. [COGS 0107][NOIP 2003] 传染病控制

    107. [NOIP2003] 传染病控制 ★★★   输入文件:epidemic.in   输出文件:epidemic.out   简单对比时间限制:1 s   内存限制:128 MB [问题背景] ...

  4. codeforces 812E Sagheer and Apple Tree(思维、nim博弈)

    codeforces 812E Sagheer and Apple Tree 题意 一棵带点权有根树,保证所有叶子节点到根的距离同奇偶. 每次可以选择一个点,把它的点权删除x,它的某个儿子的点权增加x ...

  5. Windows 下安装Python包(Numpy)的错误:Unable to find vcvarsall.bat

    情景简介: Windows 环境下安装Python2.7的Numpy扩展包时提示:error: Unable to find vcvarsall.bat 经过不懈的Google/Bing,发现不仅安装 ...

  6. Thinkphp 漏洞小试

    首先确定这个网站使用thinkphp的框架 国内很多php开源项目的代码都是使用thinkphp框架编写的,但是thinkphp框架有很多版本,如何才能知道我们使用的框架是哪个版本的呢? 在URL后面 ...

  7. 动画的分类:属性(几何)动画、内容(视频)动画:gpu vs cpu

    属性动画通过gpu根据属性来呈现: 内容动画通过cpu解码内容按照时间呈现给gpu: (或者gpu直接解码现实?)

  8. BZOJ3997:[TJOI2015]组合数学(DP,Dilworth定理)

    Description 给出一个网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右走.问至少走多少次才能将财宝捡完.此对此问题变形,假设每个格子中有好多财宝,而每一次经过一个格子至多只能捡走一 ...

  9. Pymyaql操作数据库

    Pymyaql操作数据库 Python3中专门用于操作Mysql数据库的模块. 一. 导入模块 import pymysql 二. 创建连接 conn=pymysql.connect(host=’12 ...

  10. Odoo启动配置文件

    转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9278687.html 1:--xmlrpc-port=<端口> 命令选项充许我们将服务器实例的侦听 ...