Angular下H5上传图片的方法（可多张上传）
最近做的项目中用到了angular下上传图片功能，在做的过程中遇到了许多问题，最终都得以解决
angular上传时和普通上传时过程差不多，只不过是要不一些东西转化为angular的东西。
1.ng-file-select,指令angular是没此功能的，其实也是转化成了change事件，不多说，直接上代码
angular.module('myApp')
.directive('ngFileSelect',['$parse','$timeout',function($parse,$timeout){
returnfunction(scope,elem,attr){
varfn=$parse(attr['ngFileSelect']);
elem.bind('change',function(evt){
varfiles=[],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){
vardataURItoBlob=function(dataURI){
//convertbase64/URLEncodeddatacomponenttorawbinarydataheldinastring
varbyteString;
if(dataURI.split(',')[0].indexOf('base64')>=0)
byteString=atob(dataURI.split(',')[1]);
else
byteString=unescape(dataURI.split(',')[1]);
//separateoutthemimecomponent
varmimeString=dataURI.split(',')[0].split(':')[1].split(';')[0];
//writethebytesofthestringtoatypedarray
varia=newUint8Array(byteString.length);
for(vari=0;i<byteString.length;i++){
ia[i]=byteString.charCodeAt(i);
}
returnnewBlob([ia],{
type:mimeString
});
};
varonLoad=function(reader,deferred,scope,file){
returnfunction(){
scope.$apply(function(){
varimg=newImage();
//前端压缩图片
img.onload=function(){
//resizetheimageusingcanvas
varcanvas=document.createElement("canvas");
varctx=canvas.getContext("2d");
varwidth=img.width;
varheight=img.height;
varMAX_WIDTH=width>2500?width/2:2500;
varMAX_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);
vardataURL=canvas.toDataURL('image/jpeg',1);
varblob=dataURItoBlob(dataURL);
if(blob.size>2000*1024){
dataURL=canvas.toDataURL('image/jpeg',.2);
}elseif(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);
});
};
};
varonError=function(reader,deferred,scope){
returnfunction(){
scope.$apply(function(){
deferred.reject(reader.result);
});
};
};
varonProgress=function(reader,scope){
returnfunction(event){
scope.$broadcast("fileProgress",{
total:event.total,
loaded:event.loaded
});
};
};
vargetReader=function(deferred,scope,file){
varreader=newFileReader();
reader.onload=onLoad(reader,deferred,scope,file);
reader.onerror=onError(reader,deferred,scope);
reader.onprogress=onProgress(reader,scope);
returnreader;
};
varreadAsDataURL=function(file,scope){
vardeferred=$q.defer();
varreader=getReader(deferred,scope,file);
reader.readAsDataURL(file);
returndeferred.promise;
};
return{
readAsDataUrl:readAsDataURL
};
}]);
这里说明一下，部分代码是参考别人的代码（http://blog.csdn.net/zx007fack/article/details/41073601），但是对其中内容做了修改，因为用原来的代码，如果不加前端压缩功能是正常的，前端压缩的话因为要用到canvas,直接用reader.result在ios上图片的宽高拿到的直接是0，android上是可以的，具体原因不是很确定是不是base64的问题，所以我又直接把file传了进来，然后用原生js的方法新建图片元素拿到宽高，再用Canvas进行压缩，最后转成blob，通过formData传给后台。
3.controller代码
//选择图片后执行的方法
$scope.fileArr=[];
$scope.imgSrcArr=[];vari=0;//为ios上图片都为image时添加序号
$rootScope.onFileSelect=function(files,event){
//预览上传图片开始
$rootScope.startLoading();
var$this=angular.element(event.target);
angular.forEach(files,function(value,index){
varfileIn=value;
varfileInName=fileIn.name;
varfileType=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;
};returnfalse;
}
这里处理了下图片，在名字上加了序号，因为在ios上每次选择的图片名字都叫image,查找了很多资料，说是safari的bug,后面版本才会解决，暂时只能以这种方式解决了。循环是上传多张图片
3.html代码
<ulclass="upload-view-ul">
<ling-repeat="srcinimgSrcArr"class="pull-left"ng-click="delCurUpload(src)"
ng-class="{'row-last':(($index+1)%5==0)}">
<span>x</span>
<emng-if='nrc'>{{formData.attachvo[$index].attachmentType}}</em>
<imgng-src="{{src}}">
</li>
<divclass="attachment"pop-type-selectng-if="nrc">+</div>
<divclass="attachment"ng-if="!nrc">
+
<formclass="upload">
<inputtype="file"name="file[]"ng-file-select="onFileSelect($files,$event)"multiple>
</form>
</div>
</ul>
4.顺便把formdata时代码贴一下，采用H5上传图片的方式
this.FormdataPost=function(pathUrl,formId,formData,files){
varfd=newFormData();
fd.append('formId',formId);
if(files&&angular.isArray(files)){
files.forEach(function(item){
fd.append('file',item,item.name);
});
}
fd.append('formData',angular.toJson(formData,true));
varhttpConfig={
headers:{
'Authorization':'Bearer'+this.token,
'Content-Type':undefined
},
transformRequest:angular.identity
};
return$http.post(rootUrl+pathUrl,fd,httpConfig).then(function(data){
returndata;
}).catch(function(error){
$rootScope.interfaceName=pathUrl;
$rootScope.setNewWortStatus({
status:error.status,
errInfo:error.data&&error.data.statusInfo||''
});
returnerror;
});
}
思路有一点混乱，不知道讲清楚了没有，想起来再添加吧
以上所述是小编给大家介绍的Angular下H5上传图片的方法（可多张上传），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！