在使用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. 求最长公共子串 Longest Common Subsequence

    最长公共子串 // Longest Common Subsequence 子串有别于子序列, 子串是连续的, 而子序列可以不连续 /*--------------------------------- ...

  2. python29 excel写模块xlwt

    xlwt模块用于新建excel文件并写入数据. 安装 pip install xlwt 简单使用 import xlwt from datetime import datetime #样式 style ...

  3. storm-kafka

    包依赖

  4. Postgresql 数据库,如何进行数据备份以及导入到另外的数据库

    方法其实有很多种,这里用的方法比较稳妥.之后有时间会补充别的方法. 该方法分为三步:备份数据,新建表结构,导入数据 备份数据:>>\copy table_name to '/home/ba ...

  5. iOS 内存泄漏监测自动化

    在 Android 上,Square 这家公司提供了非常有名的工具: leakcanary ,来帮助开发者们在日常开发过程中就能够发现内存泄漏.但在 iOS 上呢?在 Google 的时候,我发现了两 ...

  6. 2018-2019-2 网络对抗技术 20165322 Exp4 恶意代码分析

    2018-2019-2 网络对抗技术 20165322 Exp4 恶意代码分析 目录 实验内容与步骤 系统运行监控 恶意软件分析 实验过程中遇到的问题 基础问题回答 实验总结与体会 实验内容与步骤 系 ...

  7. TensorFlow函数(一)tf.placeholder()函数

    tf.placeholder(dtype, shape=None, name=None) 此函数用于定义过程,在执行的时候再赋具体的值 参数: dtype:数据类型.常用的是tf.float32,tf ...

  8. 2019.3.6 Github学习 &Git学习

    Github学习 1.使用Github 1.1 目的 借助github托管项目代码 1.2 基本概念 仓库(Repository) 仓库的意思是:即你的项目,你想在Github上开源一个项目,那就必须 ...

  9. WEB安全 asp+access注入

    asp+access注入 数据库 (access数据库没有数据库名) 表名 字段(列名) 记录(行,内容) 注入常用函数: top n 表示查询结果的第n个记录 len() 函数返回文本字段中值的长度 ...

  10. mysql服务器参数

    mysql服务器参数: 配置是从上往下读取,同一个参数项,后边的配置项会覆盖前边的配置项 mysql获取配置信息路径: 命令行参数    mysqld_safe  --datadir=/data/sq ...