nodejs 图片预览和上传的示例代码
时间:2019-04-07
本文章向大家介绍nodejs 图片预览和上传的示例代码,主要包括nodejs 图片预览和上传的示例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文介绍了nodejs 图片预览和上传的示例代码,分享给大家,具体如下:
效果如下:
前言
一般在上传图片之前需要暂存在本地预览一下。
前端图片预览用的是 FileReader的readAsDataURL方法
nodejs 图片上传用的是中间件 Multer
本地图片预览
FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象来指定要读取的文件或数据。
readAsDataURL方法用于读取指定的Blob或文件的内容。当读取操作完成后,readyState就完成了,并且触发了loadend。在那个时候,result属性将数据作为一个URL表示文件的数据,作为base64编码的字符串。
单个图片预览
html 部分
<input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview...">
javascript 部分
function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener("load", function () { preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); } }
多张图片预览
html 部分
<input id="browse" type="file" onchange="previewFiles()" multiple> <div id="preview"></div>
javascript 部分
function previewFiles() { var preview = document.querySelector('#preview'); var files = document.querySelector('input[type=file]').files; function readAndPreview(file) { // 支持的图片类型(可自定义) if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new FileReader(); reader.addEventListener("load", function () { var image = new Image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendChild( image ); }, false); reader.readAsDataURL(file); } } //files 就是input选中的文件,你也可以对上传图片个数进行限制 (files.length) if (files) { [].forEach.call(files, readAndPreview); } }
项目中运用
前端部分
html
<input id="txtUploadFile" type="file"> <input id="txtUploadFileList" type="file" accept="image/jpeg,image/png,image/gif" multiple class="upload-file"> <div id="preview"></div> <input id="btnSend" type="button" value="发送" class="btn btn-default">
javascript
js 方法部分拆开了下,放在一个代码块中有点长 (阅读时请查看上下文)
$(function(){ var upload={ txtUploadFile:$('#txtUploadFile'), //上传单个文件 txtUploadFileList:$('#txtUploadFileList'), //上传多个文件 btnSend:$('#btnSend'), //上传文件 preview:$('#preview'),//图片预览盒子 //预览图片加载 previewImgLoad:function(fileList){ for(var i=0;i<fileList.length;i++){ var tempFile=fileList[i]; var reader = new FileReader(); reader.readAsDataURL(tempFile); reader.onload=function (e) { var image = new Image(); image.height = 100; image.title = tempFile.name; image.src = e.target.result; upload.preview.append(image); } } } } });
/* 上传单个文件 这里是input改变时后直接上传(用于修改用户头像) 你也可以在点击上传按钮后再上传,下面的多图上传会给出案例 */ upload.txtUploadFile.change(function(){ var formData = new FormData(); formData.append('avatar',upload.txtUploadFile[0].files[0]); $.ajax({ url: '/upload/file', type: 'post', cache: false, data: formData, processData: false, contentType: false, success:function(res){ console.log('upload success'); }, error:function(){ console.log('upload faild'); } }); });
//加载预览图片 upload.txtUploadFileList.change(function(){ var fileList=this.files; upload.previewImgLoad(fileList); });
//上传多张图片 upload.btnSend.click(function(){ var files = upload.txtUploadFileList.prop('files'); if(files.length==0){ //没有选择文件直接返回 return; } var formData=new FormData(); for(var i=0;i<files.length;i++){ formData.append('photos',files[i]); } $.ajax({ url: '/upload/filesList', type: 'post', cache: false, data: formData, processData: false, contentType: false, success:function(res){ console.log('upload success'); //到这里图片已经上传成功了.你可根据返回结果处理其他的业务逻辑 if(res.status==1){ // todo something } }, error:function(){ console.log('upload faild'); } }); });
nodejs 部分
nodejs 用的是Multer中间件,这个中间件主要用于上传文件
安装Multer
npm install --save multer
Multer在nodejs中使用
var express = require('express'); var multer = require('multer'); var app = express(); //磁盘存储引擎(说白了就是指定上传的文件存储到哪,当然你也可以对文件重命名等等) var storage=multer.diskStorage({ destination: function (req, file, cb) { //我这里是存储在public下的uploads目录 cb(null, 'public/uploads/') }, filename: function (req, file, cb) { cb(null, file.fieldname + '-' + Date.now()+"_" + file.originalname) } });
单个图片上传
//如果图片上传成功会返回图片的存储路径 app.post('/upload/file', upload.single('avatar'), function(req, res) { if (!req.file) { console.log("no file received"); return res.send({ status: 0, filePath:'' }); } else { console.log('file received'); res.send({ status:1, filePath: '/uploads/' + path.basename(req.file.path) }); } });
多张图片上传
// 如果图片上传成功会返回图片的存储路径(数组) app.post('/upload/filesList', upload.array('photos',9), function(req, res) { if (req.files==undefined) { console.log("no files received"); return res.send({ status: 0, filePath:'' }); } else { var filesPathArr=[]; for(var i=0;i<req.files.length;i++){ filesPathArr.push('/uploads/' + path.basename(req.files[i].path)); } res.send({ status:1, filesPath: filesPathArr }); } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- leet笔记-62.不同路径
- leet笔记-63.不同路径II
- 五分钟C语言实现数据结构 之 二叉树链式存储
- 视频上云/网络穿透/网络映射服务EasyNTS前端切换页面卡顿如何优化?
- [译] 在 Vue 组件中分离 UI 和业务逻辑
- Android Notes|BottomNavigationView 爱上 Lottie
- Android Notes|玩转 ShapeableImageView
- 前端技术 Webpack(学习 Webpack 的原因,Webpack 快速入门)
- 每日一问第1期 | 截取字符串
- 动态规划此一篇就够了 万字总结
- 每日一问第2期 | final, finally, finalize 的区别?
- 当return遇到try、catch、finally时会发生什么?
- 五分钟C语言数据结构 之 二叉树层次遍历
- 为何IntelliJ IDEA比Eclipse好在哪里?
- 五分钟C语言数据结构 之 二叉树中序遍历