nodejs 图片预览和上传的示例代码

更新时间：2020-06-09 11:42:01 作者：startmvc

本文介绍了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
 });
 }
});

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