nodejs实现文件上传
在使用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实现文件上传的更多相关文章
- NodeJs之文件上传
NodeJs之文件上传 一,介绍与需求 1.1,介绍 1,multer模块 multer用于处理文件上传的nodejs中间件,主要跟express框架搭配使用,只支持表单MIME编码为multipar ...
- Nodejs express 文件上传
文件上传 以下我们创建一个用于上传文件的表单,使用 POST 方法,表单 enctype 属性设置为 multipart/form-data. index.htm 文件代码修改如下: <html ...
- nodejs+multiparty 文件上传
通过表单提交上传文件: html代码 <form action="/uploadFile" method="post" enctype=" ...
- nodeJs实现文件上传,下载,删除
转:https://blog.csdn.net/qq_36228442/article/details/81709272 一.简介 本文介绍了nodeJs+express框架下,用multer中间件实 ...
- nodejs应用:文件上传
功能:上传文件到服务器,图片支持客户端本地预览. 服务端 //server.js 'use strict';const http = require('http');const url = requi ...
- 【nodejs】文件上传demo实现
文件结构: index.js var server = require('./server.js'); var router = require('./router.js'); var request ...
- Html5+NodeJS——拖拽多个文件上传到服务器
实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用 ...
- Nodejs进阶:基于express+multer的文件上传
关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...
- nodejs学习之文件上传
最近要做个图片上传的需求,因为服务端春节请假回家还没来,所以就我自己先折腾了一下,大概做出来个效果,后台就用了nodejs,刚开始做的时候想网上找一下资料,发现大部分资料都是用node-formida ...
随机推荐
- 求最长公共子串 Longest Common Subsequence
最长公共子串 // Longest Common Subsequence 子串有别于子序列, 子串是连续的, 而子序列可以不连续 /*--------------------------------- ...
- python29 excel写模块xlwt
xlwt模块用于新建excel文件并写入数据. 安装 pip install xlwt 简单使用 import xlwt from datetime import datetime #样式 style ...
- storm-kafka
包依赖
- Postgresql 数据库,如何进行数据备份以及导入到另外的数据库
方法其实有很多种,这里用的方法比较稳妥.之后有时间会补充别的方法. 该方法分为三步:备份数据,新建表结构,导入数据 备份数据:>>\copy table_name to '/home/ba ...
- iOS 内存泄漏监测自动化
在 Android 上,Square 这家公司提供了非常有名的工具: leakcanary ,来帮助开发者们在日常开发过程中就能够发现内存泄漏.但在 iOS 上呢?在 Google 的时候,我发现了两 ...
- 2018-2019-2 网络对抗技术 20165322 Exp4 恶意代码分析
2018-2019-2 网络对抗技术 20165322 Exp4 恶意代码分析 目录 实验内容与步骤 系统运行监控 恶意软件分析 实验过程中遇到的问题 基础问题回答 实验总结与体会 实验内容与步骤 系 ...
- TensorFlow函数(一)tf.placeholder()函数
tf.placeholder(dtype, shape=None, name=None) 此函数用于定义过程,在执行的时候再赋具体的值 参数: dtype:数据类型.常用的是tf.float32,tf ...
- 2019.3.6 Github学习 &Git学习
Github学习 1.使用Github 1.1 目的 借助github托管项目代码 1.2 基本概念 仓库(Repository) 仓库的意思是:即你的项目,你想在Github上开源一个项目,那就必须 ...
- WEB安全 asp+access注入
asp+access注入 数据库 (access数据库没有数据库名) 表名 字段(列名) 记录(行,内容) 注入常用函数: top n 表示查询结果的第n个记录 len() 函数返回文本字段中值的长度 ...
- mysql服务器参数
mysql服务器参数: 配置是从上往下读取,同一个参数项,后边的配置项会覆盖前边的配置项 mysql获取配置信息路径: 命令行参数 mysqld_safe --datadir=/data/sq ...