做一个小程序多少钱_Angular下H5上传图片的方法(

日期:2021-01-12 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

Angular下H5上传图片的方法(可多张上传)       本文给大家分享在使用angular上传图片的功能,在开发过程中遇到很多问题,最终都解决了,今天小编给大家介绍下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/ponent 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 ponent 
 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
 }]);

这里说明一下,部分代码是参考别人的代码(),但是对其中内容做了修改,因为用原来的代码,如果不加前端压缩功能是正常的,前端压缩的话因为要用到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,后面版本才会解决,暂时只能以这种方式解决了。循环是上传多张图片

<代码

 li ng-repeat="src in imgSrcArr" ng-click="delCurUpload(src)" 
 ng-class="{'row-last': (($index+1) % 5==0)}" 
 span x /span 
 em ng-if='nrc' {{formData.attachvo[$index].attachmentType}} /em 
 img ng-src="{{src}}" 
 /li 
 div pop-type-select ng-if="nrc" + /div 
 div ng-if="!nrc" 
 form 
 input type="file" name="file[]" ng-file-select="onFileSelect($files, $event)" multiple 
 /form 
 /div 
 /ul 

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上传图片的方法(可多张上传),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!