基于html5+node.js 图片上传、预览实现

1、检测浏览器是否支持

//upload.js
if (!(window.FileReader && window.File && window.FileList && window.Blob)) {
  show.innerHTML = '您的浏览器不支持File API';
  upimg.setAttribute('disabled', 'disabled');
  return false;
}

2、图片选取

// upload.html

3、图片预览

//upload.js
// 测试文件是否为图片类型
if (!/image\/\w+/.test(files[i].type)) {
    show.innerHTML = "请确保文件为图像类型";
    return false;
}
//读取图片文件
var show = document.getElementById('showImage');
var reader = new FileReader();
//当FileReader将File对象然转换成 base64 编码的字符串，即 Data URL
//完成时调用onload方法
reader.onload = function(e) {
      var html = '![](' + e.target.result + ')

'; show.innerHTML += html; } //FileReader的实例方法readAsDataURL用来将File对象转换成 Data URL reader.readAsDataURL(files[i]);

4、图片上传

图片上传分为前端和服务端

• 前端实现原理：XMLHttpRequest Level 2 有一个 FormData 接口，也可以用来异步上传二进制文件，这篇文章 作了详细的解读。

//upload.js
    function uploadImage(imageFile) {
        var xhr = new XMLHttpRequest();
        //设置回调，当请求的状态发生变化时，就会被调用  
        xhr.onreadystatechange = function() {
            //等待上传结果,将背景图像设置为tx2.jpg 
            if (xhr.readyState == 1) {
                console.log('上传中...');
            }
            //上传成功，返回的文件名，设置到父节点的背景中  
            if (xhr.readyState == 4 && xhr.status == 200) {
                // var path = JSON.parse(xhr.responseText).path.split("\\");
                // filenode.parentNode.style.backgroundImage = "url('./uploads/" + path[path.length - 1] + "')";
                console.log('上传成功');
            }
        }

        //构造form数据 
        var data = new FormData();
        data.append("files", imageFile);

        //设置请求，true：表示异步  
        xhr.open("post", "/uploadImage", true);
        //不要缓存  
        //xhr.setRequestHeader("If-Modified-Since", "0");  
        //提交请求  
        xhr.send(data);
        //清除掉，否则下一次选择同样的文件就进入不到onchange函数中了  
        // filenode.value = null;
    }

• 后端用koa-multer中间件上传文件

//uploadImage.js
var router = require('koa-router')();
var path = require('path');
var multer = require('koa-multer');
var fs = require( "fs" );

var upload = multer({ dest: path.resolve('./file/')});

router.post('/', upload.single('files'), async function (ctx, next) {
    console.log(ctx.req.file);
    fs.rename(path.resolve('./file/' + ctx.req.file.filename), path.resolve('./file/' + ctx.req.file.filename + '.' + ctx.req.file.mimetype.split('/')[1]), function (err, data) {
        if(err){
            console.log(err);
        }
        else {
            console.log('成功');
        }
    });
    ctx.body = 'end';
});

module.exports = router;

5、代码下载

• 如何还不理解，请私信我或者下载源码