Ajax异步文件上传与NodeJS express服务端处理

最新推荐文章于 2024-05-29 09:07:42 发布
最新推荐文章于 2024-05-29 09:07:42 发布
阅读量425 收藏 1
点赞数
分类专栏： NodeJs 文章标签： NodeJs

为了避免在实现简单的异步文件上传功能时候引入一个第三方库文件的尴尬情形（库文件可能造成多余的开销，拉低应用加载速度，尤其是在引入库文件之后仅使用其中一两个功能的情况下，性价比极低），最近了解了一下文件异步上传的实现原理，顺带看了看进度条、图片预览等功能的实现，做一点简单的整理。

文件上传

HTML结构如下，一个file input和一个button。当点击“上传”按钮的时候，将file input选中的文件上传到服务器。

<input type="file" name="file" id="file" />
<button id="upload">上传</button>
  • 1
  • 2

以下是“上传”按钮的点击事件处理器，点击按钮之后通过一个XMLHttpRequest对象来实现发送异步请求。上传的内容为文件，因此还需要用到FormData对象，FormData可以js里面创建表单对象，将file input的文件append到FormData对象中，最后调用XHR对象的send()方法将表单数据发送出去即可。

var file = document.querySelector('#file');
var upload = document.querySelector('#upload');
var xhr = new XMLHttpRequest();

// 点击上传
function uploadFile(event) {
  var formData = new FormData();
  formData.append('test-upload', file.files[0]);
  xhr.onload = uploadSuccess;
  xhr.open('post', '/upload', true);
  xhr.send(formData);
}

// 成功上传
function uploadSuccess(event) {
  if (xhr.readyState === 4) {
    console.log(xhr.responseText);
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

上传进度

在进行文件上传的时候，xhr对象会有一个upload属性，会提供一个progress事件，在相应的事件处理器里面通过事件对象可以知道当前的上传进度，利用这个特点可以很方便地实现进度条或者进度提示。

<input type="file" name="file" id="file" />
<button id="upload">上传</button>
<span id="progress">0%</span>
  • 1
  • 2
  • 3
var progress = document.querySelector('#progress');

// 点击上传
function uploadFile(event) {
  var formData = new FormData();
  formData.append('test-upload', file.files[0]);
  xhr.onload = uploadSuccess;
  xhr.upload.onprogress = setProgress;
  xhr.open('post', '/upload', true);
  xhr.send(formData);
}

// 进度条
function setProgress(event) {
  if (event.lengthComputable) {
    var complete = Number.parseInt(event.loaded / event.total * 100);
    progress.innerHTML = complete + '%';
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

图片预览

上传图片的时候可以利用FileReader对象来实现图片预览。FileReader可以异步读取用户电脑上的文件，将file input选中的文件传给FileReader，读取之后取得文件的URL并设置为image元素的src即可让选中的图片文件显示出来。

<input type="file" name="file" id="file" />
<button id="upload">上传</button>
<span id="progress">0</span>
<img id="image" src="" width="200" />
  • 1
  • 2
  • 3
  • 4
var file = document.querySelector('#file');
file.addEventListener('change', previewImage, false);

// 图片预览
function previewImage(event) {
  var reader = new FileReader();
  reader.onload = function (event) {
    image.src = event.target.result;
  };
  reader.readAsDataURL(event.target.files[0]);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

服务端处理

使用express搭建一个简单的NodeJS服务端，提供上传文件的接口。express要支持文件上传需要用到中间件，在express官网上有很多介绍。这里我使用的是multer中间件，下面是简单的使用示例。upload.single表示这个接口接受的上传文件数量为1个，’test-upload’限制了上传的表单数据的键为’test-upload’（formData.append(‘test-upload’, file.files[0]);）。经过这个中间件处理之后，通过req.file可以访问到文件的相关信息，上传的文件存放在uploads文件夹中。

const upload = require('multer')({ dest: 'uploads/' });

app.post('/upload', upload.single('test-upload'), (req, res) => {
  // 没有附带文件
  if (!req.file) {
    res.json({ ok: false });
    return;
  }

  // 输出文件信息
  console.log('====================================================');
  console.log('fieldname: ' + req.file.fieldname);
  console.log('originalname: ' + req.file.originalname);
  console.log('encoding: ' + req.file.encoding);
  console.log('mimetype: ' + req.file.mimetype);
  console.log('size: ' + (req.file.size / 1024).toFixed(2) + 'KB');
  console.log('destination: ' + req.file.destination);
  console.log('filename: ' + req.file.filename);
  console.log('path: ' + req.file.path);
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

这里写图片描述
由输出可以看到，文件的命名使用一个哈希值表示，并且去除了后缀名，想要保持文件的原有的命名格式，需要再通过fs对文件进行改名。

app.post('/upload', upload.single('test-upload'), (req, res) => {
  // 没有附带文件
  if (!req.file) {
    res.json({ ok: false });
    return;
  }

  // 输出文件信息
  console.log('====================================================');
  console.log('fieldname: ' + req.file.fieldname);
  console.log('originalname: ' + req.file.originalname);
  console.log('encoding: ' + req.file.encoding);
  console.log('mimetype: ' + req.file.mimetype);
  console.log('size: ' + (req.file.size / 1024).toFixed(2) + 'KB');
  console.log('destination: ' + req.file.destination);
  console.log('filename: ' + req.file.filename);
  console.log('path: ' + req.file.path);

  // 重命名文件
  let oldPath = path.join(__dirname, req.file.path);
  let newPath = path.join(__dirname, 'uploads/' + req.file.originalname);
  fs.rename(oldPath, newPath, (err) => {
    if (err) {
      res.json({ ok: false });
      console.log(err);
    } else {
      res.json({ ok: true });
    }
  });
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

完整代码

ajax异步文件上传、进度显示、图片预览

<input type="file" name="file" id="file" />
<button id="upload">上传</button>
<span id="progress">0</span>
<img id="image" src="" width="200" />
  • 1
  • 2
  • 3
  • 4
(function () {
  'use strict';

  var file = document.querySelector('#file');
  var upload = document.querySelector('#upload');
  var progress = document.querySelector('#progress');
  var image = document.querySelector('#image');
  var xhr = new XMLHttpRequest();

  upload.addEventListener('click', uploadFile, false);
  file.addEventListener('change', previewImage, false);

  // 点击上传
  function uploadFile(event) {
    var formData = new FormData();
    formData.append('test-upload', file.files[0]);
    xhr.onload = uploadSuccess;
    xhr.upload.onprogress = setProgress;
    xhr.open('post', '/upload', true);
    xhr.send(formData);
  }

  // 成功上传
  function uploadSuccess(event) {
    if (xhr.readyState === 4) {
      console.log(xhr.responseText);
    }
  }

  // 进度条
  function setProgress(event) {
    if (event.lengthComputable) {
      var complete = Number.parseInt(event.loaded / event.total * 100);
      progress.innerHTML = complete + '%';
    }
  }

  // 图片预览
  function previewImage(event) {
    var reader = new FileReader();
    reader.onload = function (event) {
      image.src = event.target.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  }
})();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

express服务器提供文件上传接口

const express = require('express');
const upload = require('multer')({ dest: 'uploads/' });
const path = require('path');
const fs = require('fs');
const port = 8080;

let  app = express();

app.set('port', port);
// index.html, index.js放在static文件夹中
app.use(express.static(path.join(__dirname, 'static')));

app.get('*', (req, res) => {
  res.redirect('index.html');
});

app.post('/upload', upload.single('test-upload'), (req, res) => {
  // 没有附带文件
  if (!req.file) {
    res.json({ ok: false });
    return;
  }

  // 输出文件信息
  console.log('====================================================');
  console.log('fieldname: ' + req.file.fieldname);
  console.log('originalname: ' + req.file.originalname);
  console.log('encoding: ' + req.file.encoding);
  console.log('mimetype: ' + req.file.mimetype);
  console.log('size: ' + (req.file.size / 1024).toFixed(2) + 'KB');
  console.log('destination: ' + req.file.destination);
  console.log('filename: ' + req.file.filename);
  console.log('path: ' + req.file.path);

  // 重命名文件
  let oldPath = path.join(__dirname, req.file.path);
  let newPath = path.join(__dirname, 'uploads/' + req.file.originalname);
  fs.rename(oldPath, newPath, (err) => {
    if (err) {
      res.json({ ok: false });
      console.log(err);
    } else {
      res.json({ ok: true });
    }
  });
});

app.listen(port, () => {
  console.log("[Server] localhost:" + port);
});
风雨兼程之2017
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现Ajax异步交互
szwh1998的博客
10-02 3072
原生JS实现Ajax应该是前端开发人员在学习ajax中的第一步，这篇博客需要一些必要的前置知识，会更容易理解： JS基础，JS DOM操作，JS事件，ES6（熟悉更好） 什么是AJAX AJAX：全称Asynchronous Javascript And XML，也就是异步的JS和XML的意思。JS我们熟悉，XML可能不熟悉。 XML：XML文件和我们的HTML很类似，都是使用标签结构，但是XML是用来存放数据和传输数据的，且没有像<div>,<a>这样的预定义标签，全部是.
nodejs ajax进度条,Ajax异步文件上传与NodeJS express服务端处理的示例分析
weixin_28811289的博客
08-06 412
Ajax异步文件上传与NodeJS express服务端处理的示例分析发布时间：2021-07-24 11:17:21来源：亿速云阅读：79作者：小新这篇文章主要介绍Ajax异步文件上传与NodeJS express服务端处理的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！文件上传HTML结构如下，一个file input和一个button。当点击“上传”按钮的时候...
SpringBoot文件上传，和如何使用ajax进行上传，以及上传到云端上
Cao_XinYang的博客
05-29 457
3：在封装类上写上我们的存储路径和文件名，还有刚拿到的AccessKey。需要传入一个MultipartFile类型的值，从来存储我们的文件名字。1：和之前一样，我们只需要在jsp页面上先引入jq包，在加上ajax。3：在controller里我们调用我们实现的方法，加上路径。注：表单这个name是要和后台的传的那个xxx名字要一摸一样。创建自己的images目录，从来存储上传到这里的照片。在我们创建的image里也能看到上传的两个文件。2：先写上我们的一个实体类。有的路径和名字要改为自己的。
ajax node 上传文件,Ajax异步文件上传与NodeJSexpress服务端处理-20210406083909.pdf-原创力文档...
weixin_33140481的博客
08-05 117
Ajax异异步步文文件件上上传传与与NodeJS express服服务务端端处处理理为了避免在实现简单的异步文件上传功能时候引入一个第 方库文件的尴尬情形 (库文件可能造成多余的开销，拉低应用加载速度，尤其是在引入库文件之后仅使用其中一两个功能的情况下，性价比极低)，最近了解了一下文件异步上传的实现原理，顺带看了看进度条、图片预览等功能的实现，做一点简单的整理。文文件件上上传传HT ML结构如下，...
【AJAX学习笔记】AJAX | nodejs | express | jsonp | 跨域
dxy1128的博客
10-31 272
AJAX学习笔记
Ajax 笔记 配合- express框架 & NodeJS & axios个人笔记
weixin_46858768的博客
02-25 530
Ajax笔记 Ajax的特点：局部 异步 刷新
nodejs的基本学习（四）——express与mongodb
#的博客
04-27 781
前言： 承接前面的内容 express： Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用。Express 不对 node.js 已有的特性进行二次抽象，我们只是在它之上扩展了Web应用所需的功能。丰富的HTTP工具以及来自Connect框架的中间件随取随用，创建强健、友好的API变得快速又简单。 ...
Nodejs express、html5实现拖拽上传
wangyan9110's Blog
07-21 2400
一、前言       文件上传是一个比较常见的功能，传统的选择方式的上传比较麻烦，需要先点击上传按钮，然后再找到文件的路径，然后上传。给用户体验带来很大问题。html5开始支持拖拽上传的需要的api。nodejs也是一个最近越来越流行的技术，这也是自己第一次接触nodejs，在nodejs开发中，最常用的开发框架之一是expess，它是一个类似mvc模式的框架。结合html5、nodejs ex
Nodejs 之学习Ajax 附(实现用户登录案例）
weixin_50828895的博客
01-13 850
要求：当用户输入错误的用户名时提示用户名错误，输入错误的密码时提示密码错误，当用户输入用户名和密码都正确时提示合法用户。 1、编写html文件 触动按钮之后前端所发生的工作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
nodejs+express+mysql实现图片上传
小啊dai
04-17 3183
nodejs+express+multer+ajax上传图片到服务器端，以及将图片路径保存到数据库 思路，使用nodejs中的express框架搭建好服务器，创建上传图片的路由，在工作目录中划分好服务端存储图片路径的文件夹，前端利用input中的file属性，拿到本地上传的图片（可对图片大小设置限制），设置触发函数在前端，函数中传递的参数为数据库中图片所匹配的id，假设上传用户头像，则一个用户对应一个头像，头像名可以自己在后端实现重命名，可以实现覆盖上传。 前提条件需要下载好multer以及express包
nodejs实现bigpipe异步加载页面方案
10-22
BigPipe 技术，最初由 Facebook 提出，是一种有效的页面异步加载策略，它能显著降低页面加载时间，尤其是在处理复杂、数据丰富的动态页面时。本文将探讨如何使用 Node.js 结合 BigPipe 来实现这一技术，并讨论其优...
ajax服务端代码node.js
10-25
综上所述，这个示例展示了如何使用 Node.js 的 Express 框架来构建一个基本的 Ajax 服务端，其中包括对 GET、POST 和 JSONP 请求的处理。通过这样的服务端，客户端（如使用 Vue-resource 的前端应用）可以方便地进行...
Nodejs创建web服务器.zip
10-26
Node.js的异步非阻塞I/O模型使得它在处理高并发请求时表现出色，尤其适合实时性要求高的Web应用，如聊天室、实时数据流应用等。 综上所述，这个压缩包提供了学习和理解Node.js如何创建Web服务器的基础，涵盖了从...
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现北方苍鹰优化算法NGO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蝗虫优化算法GOA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
nodejs express文件上传
03-16
在Express应用中引入multer模块，并创建一个Multer对象，然后使用Multer对象的single()方法指定上传文件的字段名称，最后在路由处理函数中使用req.file获取上传的文件信息，如下所示： ``` const express = require...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值