问题描述:在Angular环境中,使用<input type='file' id='fileUpload'>这个控件进行上传文件,不通过表单提交的方法,而且需要将得到的图片进行裁剪
解决方法:
先通过
angualr.element(document.querySelector('#fileUpload)).on('change',fileHandler);
为input空间注册一个绑定的监控事件,fileHandler是这样定义的
function(evt){
var file = evt.currentTarget.file[0];
var reader = new FileReader();
reader.readAsDateURL(url);
reader.onload = function(evt){
evt.target.result//即为所取到的file的DataURL
}
}
转换成DataURL是为了可以在<img src="" />标签中展示,为了图片的裁剪,在得到最终想要的文件的DataURL后需要将DataURL恢复成文件对象,这里目前只能做到将DataURL转换成Blob对象,这样就可以进行向后台发送。转换函数如下:
function dataURLtoBlob(dataurl){
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Unit8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr],{type:mime});
}
返回的对象就可以进行发送,发送的代码格式为,
var fd = new FormData();
fd.append("image",data);
$http({
method:'POST',
url:/xxxx,
headers:{
'Content-Type':undefined
},
data: FormData对象
})
修改Blob对象的后缀名,可以直接转换成原来的类型的图片。