最近做的项目中用到了angular下上传图片功能，在做的过程中遇到了许多问题，最终都得以解决
angular上传时和普通上传时过程差不多，只不过是要不一些东西转化为angular的东西。
1.ng-file-select,指令angular是没此功能的，其实也是转化成了change事件，不多说，直接上代码
angular.module('myApp')
.directive('ngFileSelect', [ '$parse', '$timeout', function($parse, $timeout) {return function(scope, elem, attr) {var fn = $parse(attr['ngFileSelect']);
elem.bind('change', function(evt) {var files =[], fileList, i;
fileList=evt.target.files;if (fileList != null) {for (i = 0; i < fileList.length; i++) {
files.push(fileList.item(i));
}
}
$timeout(function() {
fn(scope, {
$files : files,
$event : evt
});
});
});
};
}])
2.服务 上传文件前预览并压缩图片功能
//上传文件预览
angular.module('myServers',[])
.factory('fileReader', ['$q', '$log', function($q, $log) {var dataURItoBlob = function(dataURI) {//convert base64/URLEncoded data component to raw binary data held in a string
varbyteString;if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString= atob(dataURI.split(',')[1]);elsebyteString= unescape(dataURI.split(',')[1]);//separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];//write the bytes of the string to a typed array
var ia = newUint8Array(byteString.length);for (var i = 0; i < byteString.length; i++) {
ia[i]=byteString.charCodeAt(i);
}return newBlob([ia], {
type: mimeString
});
};var onLoad = function(reader, deferred, scope,file) {return function() {
scope.$apply(function() {var img = newImage();//前端压缩图片
img.onload = function(){//resize the image using canvas
var canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");var width =img.width;var height =img.height;var MAX_WIDTH = width>2500 ? width/2 : 2500;
var MAX_HEIGHT = height>2500 ? height/2 : 2500;
if (width >height) {if (width >MAX_WIDTH) {
height*= MAX_WIDTH /width;
width=MAX_WIDTH;
}
}else{if (height >MAX_HEIGHT) {
width*= MAX_HEIGHT /height;
height=MAX_HEIGHT;
}
}
canvas.width=width ;
canvas.height=height;
ctx.drawImage(img,0, 0, width, height);var dataURL = canvas.toDataURL('image/jpeg', 1);var blob =dataURItoBlob(dataURL);if(blob.size > 2000 * 1024){
dataURL= canvas.toDataURL('image/jpeg', .2);
}else if(blob.size > 1000 * 1024){
dataURL= canvas.toDataURL('image/jpeg', .5);
}else{
dataURL= canvas.toDataURL('image/jpeg', .8);
}
blob=dataURItoBlob(dataURL);
deferred.resolve(blob);
}
img.src=URL.createObjectURL(file);
});
};
};var onError = function(reader, deferred, scope) {return function() {
scope.$apply(function() {
deferred.reject(reader.result);
});
};
};var onProgress = function(reader, scope) {return function(event) {
scope.$broadcast("fileProgress", {
total: event.total,
loaded: event.loaded
});
};
};var getReader = function(deferred, scope, file) {var reader = newFileReader();
reader.οnlοad=onLoad(reader, deferred, scope,file);
reader.οnerrοr=onError(reader, deferred, scope);
reader.οnprοgress=onProgress(reader, scope);returnreader;
};var readAsDataURL = function(file, scope) {var deferred =$q.defer();var reader =getReader(deferred, scope,file);
reader.readAsDataURL(file);returndeferred.promise;
};return{
readAsDataUrl: readAsDataURL
};
}]);
这里说明一下，部分代码是参考别人的代码(/zx007fack/article/details/41073601)，但是对其中内容做了修改，因为用原来的代码，如果不加前端压缩功能是正常的，前端压缩的话因为要用到canvas, 直接用reader.result在ios上图片的宽高拿到的直接是0，android上是可以的，具体原因不是很确定是不是base64的问题，所以我又直接把file传了进来，然后用原生js的方法新建图片元素拿到宽高，再用Canvas进行压缩，最后转成blob，通过formData传给后台。
3.controller代码
//选择图片后执行的方法
$scope.fileArr =[];
$scope.imgSrcArr=[];var i = 0; //为ios上图片都为image时添加序号
$rootScope.onFileSelect = function(files, event) {//预览上传图片开始
$rootScope.startLoading();var $this =angular.element(event.target);angular.forEach(files,function(value, index) {var fileIn =value;var fileInName =fileIn.name;var fileType = fileInName.substring(fileInName.lastIndexOf(".") + 1, fileInName.length);//解决ios下所有图片都为image.jpg的bug
if(fileIn) {
fileInName= fileInName.split('.')[0] + i + '.' +fileType;
i++;
}
attachvo.push({
name: fileInName,
type: fileType
});fileReader.readAsDataUrl(fileIn, $scope)
.then(function(result) {
result.name=fileInName;
$scope.fileArr.push(result);
$scope.imgSrcArr.push(URL.createObjectURL(result));
//每次上传后清空file框，确保每次都能调用change事件
document.querySelector('.upload').reset();
});
$scope.$on('fileProgress', function(event, data) {if(data.total ==data.loaded) {
$timeout(function() {//上传图片结束
$rootScope.endLoading();
},200)
}
});
});
$rootScope.showAttachment= false;
};return false;
}
这里处理了下图片，在名字上加了序号，因为在ios上每次选择的图片名字都叫image,查找了很多资料，说是safari的bug,后面版本才会解决，暂时只能以这种方式解决了。循环是上传多张图片
3.html代码
x
{{formData.attachvo[$index].attachmentType}}
+
