在使用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. Skype for Business 安装组件RewriteModule失败

    最近QQ网友提到部署Skype for Business,安装组件时提示安装必备组件失败:RewriteModule,如下图,安装文件名是rewrite_2.0_rtw_x64.msi,尝试手动安装也 ...

  2. Linux下打包压缩war、解压war包和jar命令

    情景:把project_a文件夹下的文件打包成project.war 1. 打包 jar -cvf project.war /project_a 说明: -c 创建war包 -v 显示过程信息 -f ...

  3. 如何查看SharePoint Server的版本信息

    可以通过查看注册表来得你当前运行的是SharePoint 2010的哪个版本,具体步骤如下: 1. 登录到安装了SharePoint Central Administration 的服务器. 2. 点 ...

  4. c# winform文本框数字,数值校验

    文本框数字,数值校验 public void DigitCheck_KeyPress(object sender, KeyPressEventArgs e) { e.Handled = !char.I ...

  5. project euler 169

    project euler 169 题目链接:https://projecteuler.net/problem=169 参考题解:http://tieba.baidu.com/p/2738022069 ...

  6. Linux常用软件安装

    1. 修改Linux的基本配置 1.修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=server1.itcast.cn 2.修改ip地址 ...

  7. 关于$.fn.scrollPath is not a function

    关于$.fn.scrollPath is not a function 在做项目过程中,用到了一个jQuery的滚动路径插件——jQuery Scroll Path.引入相关的js文件后,但是控制台一 ...

  8. Java虚拟机13:Java类加载机制

    前言 我们知道我们写的程序经过编译后成为了.class文件,.class文件中描述了类的各种信息,最终都需要加载到虚拟机之后才能运行和使用.而虚拟机如何加载这些.class文件?.class文件的信息 ...

  9. [Python web开发] Web框架开发基础 (一)

    Python WEB框架 WSGI,WEB Server Gateway Interface,可以看做是一种底层协议,它规定了服务器程序和应用程序各自实现上面接口.Python的实现称为wsgiref ...

  10. ES6标准入门 字符串的扩展

    1:模板字符串与模板引擎 https://blog.csdn.net/crper/article/details/52940625 es6模板字符串中标签模板作为参数时产生空元素的问题 https:/ ...