Angular下H5上传图片的方法（可多张上传）

Angular下H5上传图片的方法（可多张上传）

最近做的项目中用到了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

var byteString;

if (dataURI.split(',')[0].indexOf('base64') >= 0)

byteString = atob(dataURI.split(',')[1]);

else

byteString = 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 = new Uint8Array(byteString.length);

for (var i = 0; i < byteString.length; i++) {

ia[i] = byteString.charCodeAt(i);

}

return new Blob([ia], {

type: mimeString

});

};

var onLoad = function(reader, deferred, scope,file) {

return function() {

scope.$apply(function() {

var img = new Image();

//前端压缩图片

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 = new FileReader();

reader.onload = onLoad(reader, deferred, scope,file);

reader.onerror = onError(reader, deferred, scope);

reader.onprogress = onProgress(reader, scope);

return reader;

};

var readAsDataURL = function(file, scope) {

var deferred = $q.defer();

var reader = getReader(deferred, scope,file);

reader.readAsDataURL(file);

return deferred.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 = [];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代码

ng-class="{'row-last': (($index+1) % 5==0)}">

x

{{formData.attachvo[$index].attachmentType}}

+

4.顺便把formdata时代码贴一下，采用H5上传图片的方式

this.FormdataPost = function(pathUrl, formId, formData, files) {

var fd = new FormData();

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));

var httpConfig = {

headers: {

'Authorization': 'Bearer ' + this.token,

'Content-Type': undefined

},

transformRequest: angular.identity

};

return $http.post(rootUrl + pathUrl, fd, httpConfig).then(function(data) {

return data;

}).catch(function(error) {

$rootScope.interfaceName = pathUrl;

$rootScope.setNewWortStatus({

status: error.status,

errInfo: error.data && error.data.statusInfo || ''

});

return error;

});

}

思路有一点混乱，不知道讲清楚了没有，想起来再添加吧

以上所述是给大家介绍的Angular下H5上传图片的方法（可多张上传），希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。