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处理图片文件上传 的相关文章

  • 如何设置视频文件的预览,从输入类型='文件'中选择

    在我的模块之一中 我需要从 input type file 浏览视频 之后我需要在开始上传之前显示选定的视频 我使用基本的 HTML 标签来显示 但它不起作用 这是代码 document on change file multi video
  • Django:管理中的 AJAX ManyToManyField

    我要显示ManyToManyFields 在 admin 中就像filter horizontal确实如此 但会在用户在过滤器字段中键入内容时填充选项 有很多选项 一次性加载它们需要很多时间 I found django ajax 过滤字段
  • 自动完成仅显示消息并且结果可用,使用向上和向下箭头键进行导航。而是显示列表

    我的问题很清楚 我正在使用 jquery 自动完成 我不知道为什么它只向我显示消息 9 results are available use up and down arrow keys to navigate 没有向我显示结果列表 这是我的
  • 链接无效

    我正在尝试使用以下命令创建一组指向页面中特定部分的链接 a href 符号 但它似乎不起作用 点击链接似乎没有任何反应right click gt open in a new tab更改 url 但不会移动到页面的其他部分 我使用的是火狐浏
  • CORS 在 jquery 中工作正常,但在 angularjs 中不行

    我的服务器端是php mysql 我正在另一个域的 Web 服务中进行 Ajax 调用 其中启用了 的访问控制 var postUrl http logical brains com elance clone test login php
  • 第三个下拉菜单不从数据库填充

    我有以下 Index php
  • 返回重定向作为对 Ajax(fetch、XHR 等)请求的响应

    如果浏览器收到对 ajax 请求的重定向响应 会发生什么 如果浏览器收到对 ajax 请求的重定向响应 会发生什么 如果服务器发送重定向 又名 302 响应加上 Location 标头 浏览器将自动遵循重定向 对此的回应second请求 假
  • 在 Angular html 模板中访问常量枚举

    假设我有一个常量枚举 export const enum MyConstEnum Value1 Value1 Value2 Value2 Value3 Value3 现在我想在我的 Angular 模板中使用它 span This has
  • html 电子邮件内的背景图像 css - Gmail 不支持

    我想向我的用户发送如下所示的带有背景图像 css 的 html 正文电子邮件 div style width 500px height 1000px background color black background image none
  • VueJS 中数据无法正确显示

    我的 VueJS 代码有一个小问题 在 输出 压缩的 GS1 数字链接 URI 部分中 When there is no result it should have nothing display like this I have remo
  • S3.getSignedUrl 接受多种内容类型

    我正在使用react s3 uploader节点包 它接受一个signingUrl用于获取用于将对象存储到 S3 中的signedUrl 目前 我已经配置了一个 lambda 函数 带有 API 网关端点 来生成此signedUrl 经过一
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 转义 h 轮廓

    因此 我一直在尝试找出在被较低级别的标题吸引后添加内容的最佳方法是什么 section h1 Title of Section h1 h2 Related 1 h2 h2 Related 2 h2 p I NEED THIS TO BE P
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • Mongoose 独特的验证不起作用。保存重复条目

    我正在开发一个 NodeJS 应用程序 其中express是框架 MongoDB是数据库 我正在使用猫鼬插件 我有一个父母模型 我已经添加了独特 真实到场 mobile 但是每当我添加相同的手机号码时 唯一性验证就会失败 除了保存重复的文档
  • 为 Node.js 客户端应用程序保留 Firebase 用户

    我正在使用 Firebase 构建 Node js 命令行界面 CLI 用于与后端进行身份验证 我想避免让用户每次运行命令时都输入密码 相反 我想实现一个 登录 流程 将凭证保留到文件系统 该凭证可用于后续的无密码身份验证 直到用户 注销
  • Node.js 中的异步或步骤

    我无法让我的异步代码与 node js 一起使用 尝试异步和步骤库 代码仅返回第一个函数 似乎没有执行其余函数 我究竟做错了什么 thanks var step require step step function f1 console l
  • 带有 npm 启动脚本的 Nodejs 应用程序

    我对nodejs很陌生 在我的docker化环境中 我想为nodejs应用程序提供appdynamics支持 这要求每个应用程序都要求将以下内容作为其应用程序的第一行 require appdynamics profile controll
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx

随机推荐

  • 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