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
<input type="file" id="file" name="files" />
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 = '</div>';
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;
}
//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、代码下载
