如果不考虑ie9兼容性,实现【上传图片】大致的思路如下:
- 由于公司是将所有上传的图片都放到【代理服务器】里。所以【上传图片】其实是上传到【代理服务器】。可以通过ajax,通过FormData将图片上传到【代理服务器】。
- 从【代理服务器】拿到的回调里,有压缩过的图片的url,将这个url赋值给DOM里图片img的src就行了。由于我们的项目是用的vue,直接绑定:src就行了。
- 上传图片到【代理服务器】完成后,需要将url等相关数据(我们的项目后端需要一个pid,来实现用户下次访问时,后端从代理服务器根据这个pid来获取相应图片】),通过ajax发给后端(我们公司的服务器)。
思路很简单,而且核心关键其实就是第1点,第2,3只是简单的DOM操作和ajax交换数据。接下来就只关注第1点的具体实现。
1. 通过formData,结合html5的input type=file来实现上传
<input name="file" type="file" @change="update" accept="image/x-png, image/jpg, image/jpeg">
对应的,Vue的methods里,update方法如下:
update(e) {
let file = e.target.files[0]; //input提供的API,如果需要过滤图片尺寸,也可以在e.target.files[0]里拿到相应数据。
let param = new FormData(); //通过FormData来将图片信息发送给服务器;FormData是html5的私有对象。
param.append('file', file, file.name);
/* 接下来,就是通过ajax,发送form数据到服务器,我们公司用的jQuery,比较普遍的应该是axios吧 */
$.ajax({
url: '/image/upload',
type: 'POST',
data: param, //保证data格式为FormData
processData: false, //必须false才会自动加上正确的Content-Type
contentType: false //必须false才会避开jQuery对 formdata 的默认处理
}).done(function(res) {
// 回调
})
}
然后,在回调里,给DOM里的图片src赋值就行了。
当然,如果不兼容ie9,现在这个方案就行了。
在ie9下,不支持FormData。所以在ie9下,只能通过form表单形式实现图片上传。
2. ie9下通过form表单实现图片上传
<form id="myForm" method="post" action="/image/ieupload" enctype="multipart/form-data">
<input name="file" type="file" @change="update" accept="image/x-png, image/jpg, image/jpeg">
<input id="submit" type="submit" style="display:none">
</form>
form里,enctype必须为mulitpart/form-data,表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form- data,才能完整的传递文件数据。
同时要加上input type="submit",只有点击(或者trigger click)这个按钮,才会将数据发送到服务器。
这样,在上面的update方法里,就需要加一层判断,如果不是ie9(或者是浏览器不支持formData),就通过formData结合ajax实现上传图片。通过formData的好处是不用在DOM里写form,(form表单提交,一般的服务器处理方式是重定向),只通过ajax跟后端服务器交换数据可以让接口更加统一。而如果是ie9,则必须要通过form表单提交,在update方法里,通过trigger #submit元素的click事件来完成表单提交。
但是,如果服务器返回的是json,并不能拿到服务器返回的数据,而是直接提示下载或打开:
之所以ie9下提示打开或者保持,是因为:
ie无法解析回调里的json数据,就是说如果服务器返回json数据,ie会把它当做文件来处理,显示打开或保存。
解决方法如下:
在后端返回的时候自定义contype-type为"text/html",比如在node中这样写res.setHeader('Content-Type', 'text/html')。
参考资料:文件上传返回JSON数据,在IE下提示下载文件
这样改完之后,会发现,虽然现在不提示下载文件了,可是会直接跳转到新页面。
在ajax未诞生前,都是用iframe来实现无刷新的效果。为了避免跳转到新页面,需要手动指定跳转的页面为一个iframe。然后取到iframe里的回调内容后,将相应内容从iframe里取出来使用。
另外,由于因为file是Readonly,如果用户上传的图片不符合要求,想清空value,只能用新的file替换之前的file。
参考资料:http://www.cnblogs.com/nsky/archive/2012/12/28/2836578.html
3. 拓展:本地预览(fileReader)
fileReader就是html5为我们提供的读取文件的api。它的作用就是把文本流按指定格式读取到缓存,以供js调用。
参考资料:上传图片本地预览
通过fileReader的readAsDataURL方法,将文件读取为 DataURL,然后赋值给img的src,就大功告成啦。
DataURL有其固定的格式,如下:
data:[文件格式];base64,[文本流base64编码]。