KonishiLee's Blog

Node.js 上传图片

Express

Html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<div id="upload">
<!--页面中创建一个隐藏的file标签-->
<input type="file" name="fileUpload" id="fileUpload" style="width:0;height:0">
<button id="fileOpenFolder"><i class="fa fa-folder-open-o"></i></button>
<button id="fileUploadAll"><i class="fa fa-upload"></i></button>
<div class="upload-container">
<ul id="h5ImgUploadList">
</ul>
</div>
</div>
<script>
//客户端js代码
$.fn.extend(
{
'h5Upload':function(){
var imgList = [] //保存图片的数据
//点击打开文件夹按钮 开始选择文件
this.find('#fileOpenFolder').click(function(){
$('#fileUpload').click()
})
var that = this
//向服务器端上传文件
this.find('#fileUploadAll').click(function(){
if(imgList.length == 0){
console.log('请选择要上传的图片文件')
return false
}
//把多张图片用@分割上传服务器端
var data = ''
that.find('img').each(function(){
data += $(this).attr("src")+"@"
})
$.ajax({
method:'post',
data:{imgData:data},
url:'/common/api/file_upload',
success:function(res){
console.dir(res)
},
error:function(err){
console.dir(err)
}
})
})
// 添加删除图片效果,点击删除按钮后删除指定位置的图片
$('#h5ImgUploadList').on('click','.del',function(){
var currentImgIndex = $('#h5ImgUploadList .del').index(this)
imgList.splice(currentImgIndex,1)
initImgHtml()
})
$('#fileUpload').change(function(){
imgList.push(this.files[0])
initImgHtml()
})
//图片选择之后渲染页面内容
function initImgHtml(){
$('#h5ImgUploadList').html('')
imgList.forEach(function(imgData){
var reader = new FileReader()
reader.readAsDataURL(imgData)
reader.onload = function(){
var $img = $('<li><img><i class="del fa fa-remove"></i></li>')
$img.find('img').attr('src',this.result)
$('#h5ImgUploadList').append($img)
$img.load(function(){
console.dir(this)
})
}
})
}
}
}
)
$('#upload').h5Upload()
</script>

服务端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
app.post('/common/api/file_upload',(req,res)=>{
var imgDataArr = req.body.imgData
//console.log(req.body)
//为了防止文件同名,使用时间戳加随机数的方式命名文件
var imgList = []
imgDataArr.split('@').forEach(imgData=>{
if(imgData!=""){
var fileName = Date.now().toString()+Math.ceil(Math.random()*10000)+".jpg"
imgList.push("/upload/"+fileName)
//传递的数据进行替换
var base64Data = imgData.replace(/^data:image\/\w+;base64,/,"")
var dataBuffer = new Buffer(base64Data,'base64')
fs.writeFile('./public/upload/'+fileName,dataBuffer,err=>{
if(err){
console.log(err)
}
else{
}
})
}
})
res.json({
status:'y',
msg:'保存成功',
data:imgList.join(',')
})
})

gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//gulpfile.js
var gulp = require('gulp')
// nodemon服务器端js修改后重启服务
var nodemon = require('gulp-nodemon')
var browserSync = require('browser-sync').create()
var concat = require('gulp-concat'),
uglify = require('gulp-uglify')
//配置nodemon监听js、html文件的改变 重启node服务器
gulp.task('nodemon',function(){
nodemon({
ignore:['gulpfile.js','node_modules/','public/**/*.*'], //忽略不需要监视重启的文件
script:'index.js',
ext:'js html'
}).on('start',function(){
browserSync.init({
files:['public/**/*.*','views/**'],
proxy:'http://localhost:3000', //设置代理运行本地的3000端口
port:5000, //设置browser-sync的运行端口号
},function(){
console.log('浏览器已刷新')
})
})
})
gulp.task('dist',function(){
gulp.src(['./public/js/*.js'])
.pipe(concat('dist.js'))
.pipe(uglify())
.pipe(gulp.dest('./public/dist'))
})
gulp.task('default',['nodemon'])
如果喜欢这个分享,就帮忙买杯咖啡吧