本文介绍了nodejs 图片 预览和上传 的示例代码 ，分享 给大家，具体如下：
效果 如下：
前言
一般在上传 图片 之前需要暂存在本地预览一下。
前端图片 预览用的是 FileReader的readAsDataURL方法
nodejs 图片 上传 用的是中间件 Multer
FileReader对象允许web应用程序异步读取存储在用户 计算机上的文件 (或原始数据缓冲区)的内容 ，使用文件 或Blob对象来指定要读取的文件 或数据。
readAsDataURL方法 用于读取指定的Blob或文件 的内容 。当读取操作完成后，readyState就完成了，并且触发了loadend。在那个时候，result属性 将数据作为一个 URL表示文件 的数据，作为base64编码的字符串。
html 部分
javascript 部分
rush:js;">
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load",function () {
if (file) {
html 部分
rush:xhtml;">
javascript 部分
rush:js;">
function previewFiles() {
var preview = document.querySelector('#preview');
function readAndPreview(file) {
// 支持 的图片 类型（可自定义 ）
reader.addEventListener("load",function () {
reader.readAsDataURL(file);
}文件 ，你也可以对上传 图片 个数进行限制 （files.length）
}
项目中运用
前端部分
html
javascript
js 方法 部分拆开了下,放在一个 代码 块中有点长 （阅读时请查看上下文）
rush:js;">
$(function(){
var upload={
txtUploadFile:$('#txtUploadFile'),//
上传 单个
文件
txtUploadFileList:$('#txtUploadFileList'),//
上传 多个
文件
btnSend:$('#btnSend'),//
上传 文件
preview:$('#preview'),//
图片 预览盒子
//预览
图片 加载
previewImgLoad:function(fileList){
for(var i=0;i
rush:js;">
/*
上传 单个
文件
这里是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');
}
});
});
rush:js;">
//加载预览
图片
upload.txtUploadFileList.change(function(){
var fileList=this.files;
upload.previewImgLoad(fileList);
});
rush:js;">
//
上传 多张
图片
upload.btnSend.click(function(){
var files = upload.txtUploadFileList.prop('files');
if(files.length==0){
//没有选择
文件 直接返回
return;
}
var formData=new FormData();
for(var i=0;i
图片已经上传 成功了.你可根据返回结果处理其他的业务逻辑
if(res.status==1){
// todo something
}
},error:function(){
console.log('upload faild');
}
});
});
nodejs 部分
nodejs 用的是Multer 中间件，这个中间件主要用于上传 文件
安装Multer
rush:bash;">
npm install --save multer
Multer在nodejs中使用
rush:js;">
var express = require('express');
var multer = require('multer');
var app = express();
//磁盘存储引擎（说白了就是指定上传 的文件 存储到哪，当然你也可以对文件 重命名 等等）dis kStorage({Now ()+"_" + file.originalname)
单个图片 上传
rush:js;">
//如果
图片 上传 成功会返回
图片 的存储路径
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)
});
}
});
多张图片 上传
rush:js;">
// 如果
图片 上传 成功会返回
图片 的存储路径（数组）
app.post('/upload/filesList',upload.array('photos',9),res) {
if (req.files==undefined) {
console.log("no files received");
return res.send({
status: 0,filePath:''
});
} else {
var filesPathArr=[];
for(var i=0;i
以上就是本文的全部内容 ，希望对大家的学习有所帮助，也希望大家多多支持 编程之家。
