nodejs处理图片文件上传

2023-11-05

如果使用express框架的话,其内置模块就可以直接处理文件上传了,而不需要饱含额外的模块。

express版本:3.4.4

1,使用bodyParser过滤器,并且指定上传的目录为public/upload,注意这里的目录为相对于express框架app运行的路径,或者指定绝对路径。

app.use(express.bodyParser({ uploadDir: "./public/upload" }));
2,编写处理上传文件的nodejs代码,存在routes/upload.js中:

//处理图像文件上传,图像文件保存在public/upload下
exports.upload = function (req, res) {
    console.log(req.files);
    var patharray = req.files.file.path.split("\\");
    res.send(patharray[patharray.length-1]);
}

进入upload函数时express已经把文件上传都处理好了,并且保存在public/upload下了,文件名为req.files.file.path,这里面的”file“为前台页面文件input的id名称,所以这里只是简单地将文件名返回,这个文件名是express重新命名过了,保证唯一,并不是你上传时的文件名。

3,设置路由

var upload = require('./routes/upload');
app.post('/upload', upload.upload);

4,前台编写上传处理代码

页面代码:

<div class="ps-image" style="background-image:url('<%- product_list[i].pic %>'); "><input type="file" id="file" οnchange="onselectimage()" style="filter:alpha(opacity=0);opacity:0;width:100%;height:100%;"/>
</div>
采用ajax+formdata上传文件,所以这里form节点都不需要,所有处理都在onselectimage里面:

//选择文件之后直接上传
function onselectimage() {
    var xmlHttpReq = null;
    //IE浏览器使用ActiveX
    if (window.ActiveXObject) {
        xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //其它浏览器使用window的子对象XMLHttpRequest
    else if (window.XMLHttpRequest) {
        xmlHttpReq = new XMLHttpRequest();
    }
    var filenode = document.getElementById("file");


    if (xmlHttpReq != null) {
        //设置回调,当请求的状态发生变化时,就会被调用
        xmlHttpReq.onreadystatechange = function () {
            //等待上传结果
            if (xmlHttpReq.readyState == 1) {
                filenode.parentNode.style.backgroundImage = "url('/images/bigloader.gif')";
            }
            //上传成功,返回的文件名,设置到div的背景中
            if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
                filenode.parentNode.style.backgroundImage = "url('/upload/" + xmlHttpReq.responseText + "')";
            }
        }
        //构造form数据
        var form = new FormData();
        form.append("file", filenode.files[0]);


        //设置请求(没有真正打开),true:表示异步
        xmlHttpReq.open("POST", "/upload", true);
        //不要缓存
        //xmlHttpReq.setRequestHeader("If-Modified-Since", "0");
        //提交请求
        xmlHttpReq.send(form);
        //清除掉,否则下一次选择同样的文件就进入不到onchange函数中了
        filenode.value = null;
    }
}

参考资料:

1,Upload progress bar working with apache, nginx and lighttpd upload progress modules

2,模拟AJAX无刷新的文件上传功能

3,关于真正的Ajax方式上传文件

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

nodejs处理图片文件上传 的相关文章

随机推荐

  • vue3 setup + ts + vite 项目问题解决:Cannot find module ... or its corresponding type declarations.(ts2307)

    昨日我尝试使用vue3 setup ts vite进行vue3项目的实现 遇到此问题 Cannot find module or its corresponding type declarations ts2307 文件报错类型以及ts官方
  • 转载:CCNP学习考试心得

    CCNP学习考试心得 当计算机屏幕上显示 Congralation时 我不禁长出一口气 心中想 终于考完了 我所说的终于考完是指 我终于完成了CCNP考试 四个月的学习 对于某些人来说可能太长了 但是要真正掌握ccnp的内容我感觉四个月还只
  • 手把手教你使用python发送邮件

    前言 发送电子邮件是个很常见的开发需求 平时如果有什么重要的信息怕错过 就可以发个邮件到邮箱来提醒自己 使用 Python 脚本发送邮件并不复杂 不过由于各家邮件的发送机制和安全策略不同 常常会因为一些配置问题造成发送失败 今天我们来举例讲
  • 混合模型简介与高斯混合模型

    高斯混合模型 混合模型概述 In statistics a mixture model is a probabilistic model for representing the presence of subpopulations wit
  • C++primer 阅读随记

    目 录 一 C 基础 1 变量和基本类型 2 字符串 向量和数组 3 表达式 4 语句 5 函数 6 类 二 C 标准库 1 IO库 2 顺序容器 3 泛型算法 4 关联容器 5 动态内存 三 类设计者的工具 1 拷贝控制 2 重载运算与类
  • 实施Microsoft Dynamics 365 CE-5. 配置Dynamics 365 CE组织,包括配置不同的Dynamics 365 CE设置。

    本章将帮助您了解Dynamics 365 CE中为个人和管理员提供的Dynamics 365配置选项 您将了解哪些选项可以为单个用户配置 哪些是管理员用户可以完成的配置 您将了解业务管理和服务管理设置下提供的不同配置选项 您还将了解Dyna
  • RobotFramework之高级API

    一 窗口跳转 跳转页面的时候需要获取句柄 Get Window Handles 获取窗口的句柄 Select Window By Handle 切换到新窗口 但是在seleniumLibrary中只有Select window 所以我们进入
  • Top K问题的两种解决思路

    Top K问题在数据分析中非常普遍的一个问题 在面试中也经常被问到 比如 从20亿个数字的文本中 找出最大的前100个 解决Top K问题有两种思路 最直观 小顶堆 大顶堆 gt 最小100个数 较高效 Quick Select算法 Lee
  • 自适应表格中input框输入文字布局被打乱

    我今天在写一个新增用户表单的时候 发现我只要输入文字 input框的高度就会改变 导致布局被打乱 这是正常排列好的样式 这是我输入中文后的样子 后来我发现输入中文后 input的高度被撑开了 我一开始没有给盒子设置固定的高度以及行高 设置完
  • C 语言基础-什么是常量、变量?

    C 语言基础 常量和变量 常量 只读 常量是只读的固定值 在程序运行期间不会改变 不能被程序修改的量 可以是任意类型 定义常量的方式有两种 使用 define 宏定义 使用 const 关键字 常量大体分为 直接常量 字面常量 符号常量 d
  • python练习61:打印出杨辉三角形,包含二维列表的应用

    打印出杨辉三角形 要求打印出10行如下图 yanghui for i in range 10 yanghui append 构造二维列表 for j in range i 1 if j 0 or j i yanghui i append 1
  • CCF-CSP真题-2022-06-1归一化处理讲解

    题目传送门 这是CCF CSP2022 06的第一题 相比较还是比较简单 较难理解的是方差 每个样本值与全体样本值的平均数之差的平方值的平均数方差 数学计算公式是这样的 然而 用代码来写要简洁得多 这里采用暴力的复杂度算法 for int
  • MySQL utf8mb4 字符集,用于存储emoji表情

    最近在做微信相关的项目 其中MySQL 要存储emoji表情 因此发现我们常用的utf8 字符集根本无法存储表情 网上有不少替代方案 本人还是采用了修改MySQL字符集的方案简单快捷 首先将我们数据库默认字符集由utf8 更改为utf8mb
  • Pandas分组与排序

    Grouping and Sorting 分组 agg 排序 经常需要将数据根据某个字段划分为不同的组 group 进行分析 然后对组里的数据进行特定的操作 pandas的 groupby 操作便是实现这一功能 groupby的过程就是将原
  • jquery的两种常用自动加载方法

    一 jquery JavaScript的三种常用自动加载方法 1 function jQuery 2 function 3 window nl ad function 加载的先后顺序 第一步 代码块1加载 是在css html 信息加载完毕
  • Scala环境配置完成,在命令行还是不能运行

    刚开始我以为是版本兼容的问题 所以下载了很多个版本 发现没用 我找了很久都不知道是什么原因 网上也没找到跟我一样的问题 偶然我发现是系统环境变量PATHEXT中缺少东西 在PATHEXT中添加 bat 然后就可以了
  • AIX系统安装

    1 选择安装介质 CD ROM 现有备份的安装系统 网络安装 Token Ring Ethernet FDDI U盘 服务器通电启动系统 在控制台显示器出现keyboard字符时 按对应的按钮 1 进入系统管理服务模式 SMS 2 指定控制
  • C语言中结构体初始化并清零的方法有几种?

    结构体初始化清零方法 在C语言中 结构体初始化并清零的方法有以下几种 手动赋值为0 结构体定义后在函数内手动将每个成员都赋值为0 例如 struct MyStruct int a char b float c struct MyStruct
  • vue页面基本组成

    作为编写过html的人 vue页面的基本组成是什么呢 如何快速入手vue呢 我来讲下自己的思路 简介 vue是一个前端框架 运行它需要下载node js 后台支撑 下载vs code 代码编辑器 来编辑代码 可配合eliment ui 上百
  • nodejs处理图片文件上传

    如果使用express框架的话 其内置模块就可以直接处理文件上传了 而不需要饱含额外的模块 express版本 3 4 4 1 使用bodyParser过滤器 并且指定上传的目录为public upload 注意这里的目录为相对于expre