html5+express上传多图

在web开发中上传图片是一个很常见的操作，本文简单介绍一下通过jQuery结合html5中的一些新标签实现图片上传和客户端预览。
项目地址: github

** 效果图 **

1.png

主要是用到的插件

1. web开发框架express
2. nodemon插件,实现服务器端js修改后的自动重启
3. gulp实现浏览器端js代码的自动化构建
4. jQuery

实现思路:客户端通过base64方式把图片上传到服务器端,服务器端解析数据转换成文件.客户端处理文件可以使用FileReader

//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'])

<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>

//客户端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()

//服务器端js代码 接收数据进行处理
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(',')
    })
})