详解nodejs实现本地上传图片并预览功能（express4.0+）

2024-09-28 05:44:05

Express为：4.13.1 multyparty: 4.1.2

代码主要实现本地图片上传到nodejs服务器的文件下，通过取图片路径进行图片预览

写在前面：计划实现图片上传预览功能，但是本地图片上传所获得路径为 C:\fakepath\"+文件名的形式，得不到文件真实路径，所以无法直接预览，于是采用将图片上传至服务器，传回服务器路径，实现预览。前端采用通过ajax方式上传文件，使用FormData进行ajax请求，nodejs端采用multiparty模块

相关查看文档：

通过Ajax方式上传文件，使用FormData进行Ajax请求

node-multiparty github

FormData - Web APIs | MDN

部分代码：

<form name='picForm' action = "javascript:;"method="post" encype = "multipart/form-data" >
  <input type="file" id="test" id="j_imgfile">
</form>
<div>
  <img src="" id="j_imgPic">
</div>

js中采用change事件，即当选完图片时就发送ajax请求

$('#j_imgfile').on('change',function(){
    // 判断上传文件类型
    var objFile = $('#j_imgfile').val();
    var objType = objFile.substring(objFile.lastIndexOf(".")).toLowerCase();
    var formData = new FormData(document.forms.namedItem("picForm"));
    console.log(objType);
    if(!(objType == '.jpg'||objType == '.png'))
    {
      alert("请上传jpg、png类型图片");
      return false;
    }else{
      $.ajax({
        type : 'post',
        url : '/uploadUserImgPre',
        data: formData ,
        processData:false,
        async:false,
        cache: false,
         contentType: false,
        success:function(re){
          re.imgSrc = re.imgSrc.replace('public','');
          re.imgSrc = re.imgSrc.replace(/\\/g,'\/');
          $('#j_imgPic').attr('src',re.imgSrc);
        },
        error:function(re){
          console.log(re);
        }
      });
    }
  });

nodejs app.js里代码

app.post('/uploadUserImgPre',routes.users.uploadUserImgPre);

routes/users.js 里代码

 exports.uploadUserImgPre = function(req, res, next) {
 //生成multiparty对象，并配置上传目标路径
 var form = new multiparty.Form({uploadDir: './public/files/images'});
 form.parse(req, function(err, fields, files) {
  var filesTmp = JSON.stringify(files);

  if(err){
   console.log('parse error: ' + err);
  } else {
   testJson = eval("(" + filesTmp+ ")");
   console.log(testJson.fileField[0].path);
   res.json({imgSrc:testJson.fileField[0].path})
   console.log('rename ok');
  }
 });
}

部分说明：

文件上传至服务器后路径path变为：public\files\images\W-jy9YsxsPjNpQHslzGvdXBk.jpg

由于在app.js中设置过public为默认路径，所以整理地址时需要去掉public，并且把‘\'变成‘/'

app.use(express.static(path.join(__dirname, 'public')));

最后效果大概是这样的，html部分不一样~我的是jade模板，还有css什么的，并木有列出来

点击空白处，上传图片，接下来的功能就是点击上传把地址放到数据库里~（这个功能还木有做呢）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

NodeJS实现图片上传代码(Express)

文件上传是每个网站不可避免的,最近需要做些上传图片的功能,主要解决两个问题,一个是文件上传样式和服务端路径保存,功能很简单,做起来倒是没那么简单,先从最简单的页面的上传页面的样式开始. 页面样式 Html页面默认的上传的是比较难看的,需要重做一个背景图片,通过背景图片添加上传的图片: 上传图片样式: <div class="upload-container"> <input type="file" name="fileToUpload&q
图片上传之FileAPI与NodeJs

HTML5之fileAPI HTML5之fileAPI使得我们处理图片上传更加简单. 实例 html代码 <div class="form-group"> <label for="modal_inputFile" class="col-md-3 control-label label-font">位置图:</label> <div class="col-md-9"> <in
nodejs 整合kindEditor实现图片上传

kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用nodejs更简单环境: unbuntu 14.10 nodejs 0.10.35 express 4.11.2 formidable 1.0.16 kindEditor 4.1.10 webStorm 8 1.通过IDE或终端创建一个名称为test的工程 2.编辑package.json添加form
Nodejs+angularjs结合multiparty实现多图片上传的示例代码

这次我们说一下nodejs+angularjs多图片上传的问题此前也在网站看了很多篇文章,有关的内容说多不多,说少也不少,但我一一试过以后有成功的,也有没有成功的,折磨了我很长时间,最终也是成功实现了,于是想写下这篇文章,分享我的代码,也希望后人不要踏进我的坑. 首先说一下nodejs所以依赖的插件 multiparty 和 fs,可以用npm工具来安装 npm install multiparty --save npm install fs --save 先贴出我nodejs的后台代码(注意
angular2+nodejs实现图片上传功能

在使用angular2进行图片上传的时候,遇到了各种各样的问题.在多番尝试之后最终成功上传图片,下面将我的方法分享给大家: nodejs 后台代码 var express = require("express"); //网络请求模块 var request = require("request"); //引入nodejs文件系统模块 const fs = require('fs'); //引入body-parser //包含在请求正文中提交的键/值对数据. //默认
轻松创建nodejs服务器（10）：处理上传图片

本节我们将实现,用户上传图片,并将该图片在浏览器中显示出来. 这里我们要用到的外部模块是Felix Geisendörfer开发的node-formidable模块.它对解析上传的文件数据做了很好的抽象. 要安装这个外部模块,需在cmd下执行命令: 复制代码代码如下: npm install formidable 如果输出类似的信息就代表安装成功了: 复制代码代码如下: npm info build Success: formidable@1.0.14 安装成功后我们用request将其引入
nodejs利用ajax实现网页无刷新上传图片实例代码

通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormData()对象可以有效的解决这个问题废话不多说直接上关键代码: html部分 <div class="form-group"> <label>File input</label> <input type="file" name="file" id="file">
ajax +NodeJS 实现图片上传实例

前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传.这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接"拿来"用 note(注意) 大家先在public目录下创建一个名为uploads的文件夹,这个文件夹是用来保存你上传过的图片安装multer模块: npm i -S multer code(代码) 1.app.js const express = require('express'); const multer = requi
nodejs 图片预览和上传的示例代码

本文介绍了nodejs 图片预览和上传的示例代码,分享给大家,具体如下: 效果如下: 前言一般在上传图片之前需要暂存在本地预览一下. 前端图片预览用的是 FileReader的readAsDataURL方法 nodejs 图片上传用的是中间件 Multer 本地图片预览 FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象来指定要读取的文件或数据. readAsDataURL方法用于读取指定的Blob或文件的内容.当读取操
详解nodejs实现本地上传图片并预览功能（express4.0+）

Express为:4.13.1 multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\"+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览.前端采用通过ajax方式上传文件,使用FormData进行ajax请求 ,nodejs端采用multiparty模块相关查看文档: 通过Ajax
JS实现上传图片实时预览功能

前段时间在网络上找的代码,修改了一部分用在了项目里.原博客地址找不到了,如果原作者看到的话留言我,将于第一时间删除. //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj) { //创建dom元素 var divPreviewId = 'divPreview_' + fileObj.name; var imgPreviewId = 'imgHeadPhoto_' + fileObj.na
js上传图片及预览功能实例分析

本文实例讲述了js上传图片及预览功能.分享给大家供大家参考.具体分析如下: 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt="" /> <input type="file" /> function DisplayImage(fileTag,imgTagId){ var allowExtention=".
简单实现jQuery上传图片显示预览功能

本文实例为大家分享了jQuery上传图片显示预览的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://img
React+ajax+java实现上传图片并预览功能

之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图片到服务器,并且返回图片名字和图片在服务器的路径,然后在页面显示文件名字和图片. 源码:ajax上传预览 React中: import React from 'react'; import Http from './http' const URL = 'http://localhost:8080/f
H5上传本地图片并预览功能

最近工作中需要H5上传显示图片的功能,如图: 直接上代码: html部分 <div class="works-wrap"> <div class="figure-box" id="figure_box"></div> <div class="add-btn"> <input type="file" id="imgUploadBtn"
详解Java读取本地文件并显示在JSP文件中

详解Java读取本地文件并显示在JSP文件中当我们初学IMG标签时,我们知道通过设置img标签的src属性,能够在页面中显示想要展示的图片.其中src的值,可以是磁盘目录上的绝对,也可以是项目下的相对路径,还可以是网络上的图片路径.在存取少量图片的情况下,采用相对路径存储图片的情况下最方便,也最实用.但是当图片数量过多时,这种方式就显的有些掣肘了. 当系统的图片数量过多时,如果仍把这些图片当做项目的一部分去发布,势必会大大延长项目的发布时间及更新时间.对于某些对于时限性要求特别高的系统来说,采
详解NodeJS模块化

目录一.前言二.正文 2.1.什么是模块 2.2.Resolving 2.3.require.resolve 2.4.模块间的父子依赖关系 2.5.exports, module.exports 2.6.模块循环依赖 2.7..json和.node 2.8.Wrapping 2.9.Cache 三.总结一.前言我们知道,Node.js是基于CommonJS规范进行模块化管理的,模块化是面对复杂的业务场景不可或缺的工具,或许你经常使用它,但却从没有系统的了解过,所以今天我们来聊一聊Node
详解如何将本地JAR包添加到本地Maven仓库中

详解如何将本地JAR包添加到本地Maven仓库中有些时候,当我们需要在自己的maven工程中添加一个确定的jar而发现Maven中央仓库不存在时,但是我们自己手上有这些需要的jar包,那么我们可以自给自足,把这个jar包添加到我们的自己的maven仓库中,这样方便在maven工程中引用. 比如sqljdbc.jar在Maven中央仓库中找不到,但是我们的maven工程中确实需要这样的一个jar包,那么我们首先需要下载对应版本的sqljdbc.jar包到本地,然后按照以下的命令添加到本地仓库.(
JS中利用FileReader实现上传图片前本地预览功能

引子平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所以比较好的是上传之前先在本地预览一下. 之前做项找插件的时候就知道纯前端可以实现图片本地预览,可今天面试的时候被问到时竟然一脸懵逼,然后竟然无意中就在电脑桌面发现了实现的demo,然后根据demo查了一下API,稍微总结下: 首先得拿到File对象当用input标签上传图片时event对象中会包含

详解nodejs实现本地上传图片并预览功能（express4.0+）

相关推荐

随机推荐