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 ...
随机推荐
- java.lang.UnsatisfiedLinkError: /usr/openv/java/jre/lib/amd64/libawt_xawt.so: libXtst.so.6: cannot open shared object file: No such file or directory
解决办法: 在radhat 或者centos系统中运行一下命令即可:yum install libXext.x86_64yum install libXrender.x86_64yum install ...
- 3星|《深度思考:不断逼近问题的本质》:香奈儿前CEO自传
深度思考:不断逼近问题的本质 作者是前香奈儿CEO,主要内容是作者的自传,从家庭说起,一直到卸任香奈儿CEO. 作者出生于上世纪六七十年代的一个美国中西部的犹太家庭,崇尚自由,讨厌标签.高中的一个暑假 ...
- The good life is one inspired by love and guided by knowledge
The good life is one inspired by love and guided by knowledge 伯特兰·罗素Bertrand Russell18721970 I can a ...
- HTTP协议图--HTTP 响应状态码(重点分析)
1. 状态码概述 HTTP 状态码负责表示客户端 HTTP 请求的返回结果.标记服务器端的处理是否正常.通知出现的错误等工作. HTTP 状态码如 200 OK ,以 3 位数字和原因短语组成.数字中 ...
- c++计算器后续(5)
自娱自乐: 大概是重新开始玩qt,然后MFC和第四步附加的作业大概不会去玩了.以上. QT相关: 阶段一: 原来作业里举了qt和mfc这两个做界面的东西,网上都说qt容易上手,学了mfc再来看qt简直 ...
- python 中的Array,Value及内存共享
官网文档的例子 from multiprocessing import Process, Value, Array def f(n, a): n.value = 3.1415927 for i in ...
- Ping服务
什么是Ping服务 ping是基于XML_RPC标准协议的更新通告服务,用于博客把内容更新快速通知给百度,以便百度及时进行抓取和更新. Ping服务使用方法 你可以采取手动通知和自动通知两种方式使用p ...
- BZOJ3573:[HNOI2014]米特运输(树形DP)
Description 米特是D星球上一种非常神秘的物质,蕴含着巨大的能量.在以米特为主要能源的D星上,这种米特能源的运输和储 存一直是一个大问题.D星上有N个城市,我们将其顺序编号为1到N,1号城市 ...
- nRF5 SDK for Mesh(三) Installing the mesh toolchain 安装编译工具链
Installing the mesh toolchain To build the example applications, a toolchain based on either CMake o ...
- svn 提交报错post-commit hook failed (exit code 23) with output
svn 提交文件,hook同步更新报权限错误 排查后可能原因是被同步的服务器 selinux 已开启. 查看状态命令:/usr/sbin/sestatus -v #如果SELinux status参 ...