在使用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. 【MyBatis】 MyBatis入门

    1.MyBatis简介 MyBatis是这个框架现在的名字,而此框架最早的名字是IBatis,其名字的含义是“internet”.“abatis”两个单词的组合,是在2002年的时候开始的一个开源项目 ...

  2. Azure 登录设置

    转自 http://blog.csdn.net/azure_nonofficial/article/details/38095459 这是我们Azure非官方的第一篇博文,欢迎大家各种拍砖. 微软云计 ...

  3. Python 处理脚本的命令行参数-getopt

    # -*- coding:utf-8 -*- import sys def test(): """ 参数列表:sys.argv 参数个数:len(sys.argv) 脚本 ...

  4. Mac下的mongodb安装

    mac下的mongodb安装主要有两种方式,一是手工安装,需在官网下载源文件,二是通过homebrew,至于homebrew不做介绍.既然是Mac系统下,我认为直接通过homebrew安装最好,省事还 ...

  5. sychronized关键字(多线程)

    sychronized关键字: 1. 作用:利用该关键字来创建内置锁,实现线程同步: 2. 分类:(1)sychronized同步方法:(2)sychronized同步代码块: 3. sychroni ...

  6. BZOJ1079:[SCOI2008]着色方案(DP)

    Description 有n个木块排成一行,从左到右依次编号为1~n.你有k种颜色的油漆,其中第i种颜色的油漆足够涂ci个木块. 所有油漆刚好足够涂满所有木块,即c1+c2+...+ck=n.相邻两个 ...

  7. [USACO09MAR]Sand Castle

    嘟嘟嘟 太水了,大佬们就绕道吧…… 就是m, b数组分别排个序,然后更改对应位置的m[i]和b[i],就行了. 因为如果m[i]不改为b[i]而是b[i + 1]的话,那么必定要将m[j] (j &g ...

  8. 5、Spring-Cloud-声明式调用 Feign(上)

    5.1.写一个 Feign 害户端 新建项目: 依赖: <dependency> <groupId>org.springframework.boot</groupId&g ...

  9. 如何在Ubuntu中添加中文输入法

    首先打开终端,输入以下命令 打开终端输入以下命令 弹出设置IBus首选项对话框,单击输入法文本框,再单击添加按钮,选中汉语中的拼音,单击添加,设置完毕. 最后单击输入法图标的选项中的首选项中的拼音模式 ...

  10. HDU 1233 还是畅通工程(Kruskal算法)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1233 还是畅通工程 Time Limit: 4000/2000 MS (Java/Others)   ...