Vue组件放送之文件上传

文件上传组件是常见的 Web 组件。HTML 提供了 input file 原始上传组件，我们在此基础上利用各种 HTML5 特性来封装该组件，而不是通过内嵌一个隐藏 Flash 上传（古老的做法）。又因，利用了 vue 的 MVVM 和组件化的强大特性，这一切都变得简单轻松。

先谈谈组件的需求——一般图片上传的场景较多，故该组件除了任意文件上传，还特意针对图片上传来开发：

3. 可以无刷新上传可以无刷新上传
4. 可以美化 input file 元素，允许自定义样式可以美化 input file 元素，允许自定义样式
5. 可以预览本地图片
6. 可以先压缩图片大小或者自定义分辨率
7. 可以检测文件扩展名、文件大小、实际文件类型检测、图片分辨率大小
8. 可以在弹出的文件选择框限制文件类型
9. 可以显示上传进度
10. 可以断点续传
11. 在 iOS 上，有照片旋转不正确的问题，这个问题也必须得到解决。在 iOS 上，有照片旋转的问题，这个问题也必须得到解决。

下面我们逐一分析需求的解决办法。

XHR 2.0 文件上传

无刷新上传，实际上在 XHR 2 之前我一直使用 iframe 实现，原理是隐藏一个 ifame 并赋予 id，然后 form 表单 target 属性指向的就是那个 iframe id，这会形成是 ifame 上传的文件，表单的目的地是该 iframe，又因 iframe 是隐藏的，故能实现“无刷新”上传。

不过坑也不能避免的，一个表单是不允许嵌套另外一个表单的，所以我写这种 vue 组件时十分累，避免在同一个 iframe 中，要写大量 dom 控制语句，而且又要考虑多个上传组件的话，更麻烦了。

后来XHR 2.0 即 XmlHttpRequest 2.0 支持文件上传，问题迎刃而解。

var fd = new FormData();
if(this.$blob){ // File 类型不需要文件名，Blob 强制需要
	fd.append("file", this.$blob, this.$fileName);
} else 
	fd.append("file", this.$fileObj);

var xhr = new XMLHttpRequest(), self = this;
xhr.onreadystatechange = ajaxjs.xhr.callback.delegate(null, this.uploadOk_callback, 'json');
xhr.open("POST", this.action, true);
xhr.onprogress = function(evt) {
    var progress = 0;
    var p = ~~(evt.loaded * 1000 / evt.total);
    p = p / 10;
    
    if(progress !== p) {
    	progress = p;
    	console.log('progress: ', p);
    }
    self.progress = progress;
};
xhr.send(fd);

原理比较简单，就是 FormData 作为容器放置 file/blob 对象。注意 blob 必须指定文件名，否则后台会报错。

如上所见，XHR 包含了进度反馈的功能，也就是 progress 事件。于是把第9点需求也解决了。

美化上传按钮

如何美化就是样式 CSS 问题了。我们知道 label 标签有个特性，在设置了 for 属性后（该值是一个 id），就是点击标签文本会使得 id 所在的元素获得焦点，典型如 input 元素。有一个便捷不用设置 id 的方法就是 label 包含提示文字和 input 两者。

利用该方法，我们于是可以隐藏一个 input，然后通过 for/id 关联起来 label 与 input 元素，如下代码所示。

<label for="uploadInput_663">
	<div><div>+</div>点击选择图片</div>
</label>

<input type="file" id="uploadInput_663" accept="image/*" class="hide">

实际丑陋的 input 界面被隐藏了，我们可以随心所欲地美化 label 标签，如我制作的，

但背后依然调用 input 的功能。

值得一提的的是， H5 可自定义弹出的文件选择框限制文件类型，如属性 accept=“image/” 表示只选择 图片 来上传，非常简单。

预览本地图片

我们知道 < img src=“xxx” /> 元素的图片可以是一个 url，或者 base64 编码的文本。图片还未上传到服务器，自然就没用所谓的 url，自然应该从 base64 方面“打主意”。H5 为我们提供 file 类型对象及其读取器 file reader，可以在浏览器本地读取到客户端计算机里面的图片，并转换为 base64 编码。先说说 File 对象，

// 当前 input file 元素触发的 onchange(e) 事件如下
this.$fileObj = e.target.files[0]; // 保留 File 对象 的引用。数组表示可以多选文件
this.$fileName = this.$fileObj.name; // 文件名
this.$fileType = this.$fileObj.type; // 文件类型，MIME
var size = this.$fileObj.size; // 文件大小

	// 文件头判别，看看是否为图片
	var imgHeader = {
		"jpeg" : "/9j/4",
		"gif" : "R0lGOD",
		"png" : "iVBORw"
	};
	
	for ( var i in imgHeader) {
		if (~imgBase64Str.indexOf(imgHeader[i])) {
			self.isExtName = true;
			return;
		}
	}
	
	self.errMsg = "亲，改了扩展名我还能认得你不是图片哦";

// 转换为 base64 字符串
var reader = new FileReader();
reader.onload = function(e) {
		var imgBase64Str = e.target.result; // 得到了图片的 base64 编码
		……
｝
reader.readAsDataURL(file);