文件上传(H5 + node)

背景:原来在项目中使用 flash 实现文件上传,但是现在浏览器默认是禁用 flash 的,需要手动启动,不太方便,所以修改为使用 H5。

前端代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>文件上传</title>
 9 </head>
10
11 <body>
12     <h3>文件上传</h3>
13     <input type="file" name="inputFile" id="" onchange="uploadFile()">
14
15     <script src="./jquery.min.js"></script>
16     <script>
17         var uploadFile = function (event) {
18             var e = event || window.event;
19             var file = e.target.files[0];
20             var fileReader = new FileReader();
21
22             var toBlob = function (a) {
23                 return new Blob([a], {
24                     type: file.type
25                 });
26             }
27             fileReader.onload = function () {
28                 var result = this.result;
29                 var blob = new Blob([result], {
30                     type: file.type
31                 });
32                 var formData = new FormData();
33                 // inputFile: 在 form 表单中是 input 的 name 属性值,此字段 为后台读取数据的字段
34                 formData.append(‘inputFile‘, blob, file.name);
35                 console.log(‘formData--‘, formData);
36                 $.ajax({
37                     type: "post",
38                     url: "http://127.0.0.1:8080/uploadFile",
39                     processData: false,
40                     contentType: false,
41                     data: formData,
42                     timeout: 6000,
43                     success: function (data) {
44                         console.log(‘upload success‘)
45                     },
46                     error: function (xhr, text) {
47                         if (text === ‘timeout‘) {
48                             xhr.abort();
49                         }
50                     }
51                 });
52             }
53
54             fileReader.readAsArrayBuffer(file);
55         }
56     </script>
57 </body>
58
59 </html>

后台代码:

 1 var express = require(‘express‘);
 2 var app = express(); 5 var multiparty = require(‘multiparty‘);
 3 var util = require(‘util‘);
 4 var fs = require(‘fs‘);
 5
 6
 7 app.use(bodyParser.urlencoded({
 8     extended: true,
 9 }));19 app.use(function (req, res, next) {
10
11     // Website you wish to allow to connect
12     res.setHeader(‘Access-Control-Allow-Origin‘, "*");
13
14     // Request methods you wish to allow
15     res.setHeader(‘Access-Control-Allow-Methods‘, ‘GET, POST, OPTIONS, PUT, PATCH, DELETE‘);
16
17     // Request headers you wish to allow
18     res.setHeader(‘Access-Control-Allow-Headers‘, ‘X-Requested-With,content-type‘);
19
20     // Set to true if you need the website to include cookies in the requests sent
21     // to the API (e.g. in case you use sessions)
22     // res.setHeader(‘Access-Control-Allow-Credentials‘, ‘true‘);
23
24     // Pass to next layer of middleware
25     next();
26 });
27
28 app.post(‘/uploadFile‘, function (req, res) {
29     // 生成multiparty对象,并配置上传目标路径
30     var form = new multiparty.Form();
31     // 设置编辑
32     form.encoding = ‘utf-8‘;
33     form.parse(req, function (err, fields, files) {
34         var filesTemp = JSON.stringify(files, null, 2);
35
36         if (err) {
37             console.log(‘parse error:‘ + err);
38         } else {
39             // console.log(‘parse files:‘ + filesTemp);
40             var inputFile = files.inputFile[0];
41             var uploadedPath = inputFile.path;
42
43             var readStream = fs.createReadStream(uploadedPath);
44             // ‘./src/files/‘ 文件保存的路径(相对于当前项目文件路径) originalFilename 源文件的名称
45             var writeStream = fs.createWriteStream(‘./src/files/‘ + inputFile.originalFilename);
46             readStream.pipe(writeStream);
47             readStream.on("end", function () {
48                 // Operation done
49                 console.log(‘Operation done‘);
50             });
51         }
52
53         res.writeHead(200, {
54             ‘content-type‘: ‘text/plain‘
55         });
56         res.write(‘received upload:\n\n‘);
57         res.end(util.inspect({
58             fields: fields,
59             files: files
60         }));
61     });
62 });
63
64
65 var server = app.listen(8080, function () {
66     var host = server.address().address;
67     var port = server.address().port;
68
69     console.log("应用实例,访问地址为 http://%s:%s", host, port);
70 });

注意:

1、使用 fs.rename 重命名文件名时会报错:  EXDEV: cross-device link not permitted

2、util.pump() is deprecated. Use readableStream.pipe() instead.

原文地址:https://www.cnblogs.com/landmass/p/9910278.html

时间: 2024-07-29 11:46:36

文件上传(H5 + node)的相关文章

文件上传--基于Spring MVC框架+SmartUpload

这篇文章是介绍文件上传的,由于在spring MVC上实现起来和直接在servlet中写有些不同,所以特地写了一下这篇文章,关于不同点,大家可以先阅读一下上一篇文章.好了,下面直接上代码. jab包是jspSmartUpload.jar,如果有类似的jar包如:commons-fileupload-1.2.2,留一个即可,否则会冲突报错 首先是一个简单的页面(jsp),比较丑,但能用: <%@ page language="java" contentType="text

node express formidable 文件上传后修改文件名

//我是用php的思想来学习nodejs var express = require('express'); var router = express.Router(); var fs = require('fs'); var path= require("path"); var formidable = require('formidable'); /* GET home page. */ router.get('/', function(req, res, next) { res.

Node.js入门教程——如何实现文件上传功能

作者:zhanhailiang 日期:2014-11-16 本文将介绍如何使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/nodejs-upload-image-demo]# npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to gu

Node.js新手教程——怎样实现文件上传功能

作者:zhanhailiang 日期:2014-11-16 本文将介绍怎样使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/nodejs-upload-image-demo]# npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to gu

node+express实现文件上传功能

在进行node web开发时,我们可能经常遇到上传文件的问题,这一块如果我们没有经验,可能会遇到很多坑,下面我将跟大家分享一下,实现文件上传的一些方式. 一.node+express文件上传的常用方式 通过一段时间的查阅资料.摸索,我发现实现上传的方式有:1.express中间件multer模块(此效率最高,在express3.x原生支持,到了express4.x独立成一个模块了),2.connect-multiparty模块(但现在官方不推荐),3.使用multiparty模块实现(此方法比较

node中间层实现文件上传

一般情况下,前端的文件上传一般都是通过form表单的(<input type="file" />)来完成文件的上传,如果使用node中间层完成跨域,文件的上传就需要在node中间层处理成可读流,转成formData完成转发. 一.form表单文件上传 这是最常见的文件上传方式,通过form表单实现,简单实用,设置一下method.enctype.action属性就可以了,多文件上传需要设置multiple属性(部分浏览器支持还是有些问题的). 1 <form meth

Node.js文件上传

Node.js express使用Multer实现文件上传html部分 <div> <h3>文件上传:</h3> 选择一个文件上传: <br/> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="content&quo

node 文件上传

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>向服务器上传文件</title> <script type="text/javascript"> function uploadFile(){ var formData=new FormData(); var files=do

H5危险的文件上传对话框

文件对话框 文件上传对话框是一直以来就存在的网页控件. 到了 HTML5 时代,增加了更多的功能,例如支持文件多选.Chrome 甚至还支持「上传文件夹」这一私有特征: <input type="file" webkitdirectory /> 在给用户方便的同时,其安全隐患也逐渐出现.用户平时在下载时,理所当然的弹出的是保存对话框,因此常常不仔细看就做出了选择. 这极有可能被攻击者所利用.一些恶意网站在用户点击下载时,故意弹出一个上传对话框.只要用户一疏忽,就把选中的文件