最近做的项目中用到了角下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决
角上传时和普通上传时过程差不多,只不过是要不一些东西转化为角的东西。
1. ng-file-select,指令角是没此功能的,其实也是转化成了改变事件,不多说,直接上代码
angular.module (“myApp”)
.directive (“ngFileSelect”,[解析美元,美元超时,函数(解析,超时美元){
返回函数(范围、elem attr) {
var fn=$解析(attr (' ngFileSelect '));
初步的。绑定(‘改变’,函数(evt) {
var=[]文件,文件列表,我;
文件列表=evt.target.files;
如果(文件列表!=null) {
(我=0;我& lt;fileList.length;我+ +){
files.push (fileList.item (i));
}
}
美元超时(函数(){
fn(范围,{
美元文件:文件,
事件:美元evt
});
});
});
};
}])
2。服务上传文件前预览并压缩图片功能
//上传文件预览
angular.module (“myServers”, [])
.factory (“fileReader”,[问美元,美元日志,函数(q,日志美元){
var dataURItoBlob=函数(dataURI) {//base64/URLEncoded数据组件转换为原始二进制数据保存在一个字符串
var byteString;
如果(dataURI.split (" ") [0] .indexOf (base64)在=0)
byteString=atob (dataURI.split (" ") [1]);
其他的
byteString=unescape (dataURI.split (" ") [1]);//mime组件分离
var mimeString=dataURI.split (" ") [0] .split (“:”) [1] .split (“;”) [0];//字符串的字节写入一个类型化数组
var ia=new Uint8Array (byteString.length);
(var=0;我& lt;byteString.length;我+ +){
ia[我]=byteString.charCodeAt(我);
}
返回新Blob ([ia], {
类型:mimeString
});
};
var>//选择图片后执行的方法
美元的范围。fileArr=[];
美元的范围。imgSrcArr=[]; var=0;//为ios上图片都为图像时添加序号
rootScope美元。onFileSelect=函数(文件、事件){//预览上传图片开始
美元rootScope.startLoading ();
var $这=angular.element (event.target);
角。forEach(文件、函数(价值,指数){
var fileIn=价值;
var fileInName=fileIn.name;
var文件类型=fileInName.substring (fileInName.lastIndexOf (“。”) + 1, fileInName.length);//解决ios下所有图片都为image.jpg的bug
如果(fileIn) {
fileInName=fileInName.split(“。”)[0] +我+”。' +文件类型;
我+ +;
}
attachvo.push ({
名称:fileInName,
类型:文件类型
});
fileReader。readAsDataUrl (fileIn美元范围)
不要犹豫(函数(结果){
result.name=fileInName;
美元scope.fileArr.push(结果);
scope.imgSrcArr.push美元(URL.createObjectURL(结果));//每次上传后清空文件框,确保每次都能调用改变事件
document.querySelector (.upload) .reset ();
});
美元的范围。美元(fileProgress,函数(事件、数据){
如果(数据)。总==data.loaded) {
美元超时(函数(){//上传图片结束
美元rootScope.endLoading ();
},200)
}
});
});
rootScope美元。showAttachment=false;
},返回false;
}
这里处理了下图片,在名字上加了序号,因为在ios上每次选择的图片名字都叫形象,查找了很多资料,说是safari浏览器的bug,后面版本才会解决,暂时只能以这种方式解决了。循环是上传多张图片
3. html代码
& lt; ul类=皍pload-view-ul”比;
& lt;李ng-repeat=imgSrcArr "班" src=" pull-left " ng-click=癲elCurUpload (src)”
ng-class=" {row-last的:((美元指数+ 1)% 5==0)}”在
& lt; span> x
& lt; em ng-if=拔被帷痹趝{formData.attachvo(美元指数).attachmentType}} & lt;/em>
& lt; img ng-src=" https://www.yisu.com/zixun/{{src}}”在
& lt;/li>
& lt; div类="附件" pop-type-select ng-if=拔被帷痹? & lt;/div>
& lt; div类="附件" ng-if=? nrc”比;
+
& lt;形式类=吧洗北?
& lt;输入类型="文件" name="文件[]" ng-file-select=皁nFileSelect(文件、事件)美元“multiple>
& lt;/form>
& lt;/div>
& lt;/ul>
4。顺便把formdata时代码贴一下,采用H5上传图片的方式
这一点。FormdataPost=function (pathUrl formId formData,文件){
var fd=new FormData ();
fd。追加(formId, formId);
如果(文件,,angular.isArray(文件)){
files.forEach(函数(项){
fd。追加(“文件”,项目,item.name);
});
}
fd。追加(formData,棱角分明。toJson (formData真实));
var httpConfig={
标题:{
“授权”:“持票人”+ this.token,
“内容类型”:定义
}，
transformRequest: angular.identity
};
返回http美元。帖子(rootUrl + pathUrl, fd, httpConfig)(功能(数据){
返回数据;
(错误){}).catch(功能
美元rootScope.interfaceName=pathUrl;
美元rootScope.setNewWortStatus ({
状态:error.status,
errInfo:错误。数据,和error.data。statusInfo | |”
});
返回错误;
});
}
