angular上传图片，最近自己研究了一个。笨方法。

首先，我们先来看html如何写，这里面我使用了canvas画出来图片。

<div class="col-md-6">
<div class="form-group" uploader="uploader">
<label class="oLabel1">轮播图图片:</label>
<div class="m-l-lg">
<div class="form-group inline fileinput" ng-if="uploader2.queue.length == 0" style="margin-left:0;background: url('{{activityForm.viewImg}}') no-repeat; background-size:128px 128px;">
<input class="form-control inline w_search_input" nv-file-select="" type="file" uploader="uploader2" accept="image/png,image/jpeg" />
</div>
<div class="form-group inline fileinput" ng-if="uploader2.queue.length > 0" style="margin-left:0;background: none">
<!--<canvas id="p3" ng-init="initimg2(uploader2.queue[uploader2.queue.length -1]._file)"></canvas>-->
<canvas id="p3"></canvas>
<input class="form-control inline w_search_input" style="position: absolute;top:0" nv-file-select="" type="file" uploader="uploader2" accept="image/png,image/jpeg" />
</div>
<div class="form-group inline filemask none" id="filemask2">
<span>正在上传中...</spaN>
</div>
</div>
</div>
</div>

接着我大概写下我的js流程：

1.首先定义了一个对象：

$scope.activityForm = {
        
        viewImg:'img/upload_default.jpg',
        
        
        createTime:new Date().Format("yyyy-MM-dd"),
        
}

2.接着我定义了一个对象，并且设置图片的大小

var options2 = {
        mimeType: "image/jpeg",//这是一个空白图片
        filename: "shareDetailPhoto",
        appid: 195,//适配。
    };


    var uploader2 = $scope.uploader2 = new FileUploader({
        url:接口,
        formData:[options2]
    });


    uploader2.filters.push({
        name: 'imageFilter',
        fn: function(item /*{File|FileLikeObject}*/, options) {
            var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
            return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
        }//图片的规则
    });
    uploader2.onAfterAddingFile = function(fileItem) {
    if(fileItem._file.size > 204800){//1M=1048576
    uploader2.queue.length = 0;
    alert("文件太大");

//控制图片的大小。
    }else{
       $scope.initimg2(fileItem._file);
       fileItem.upload();
       angular.element("#filemask2").removeClass("none")
    }
    };


    uploader2.onSuccessItem = function(fileItem, response, status, headers) {
var returnData = angular.fromJson(response);
        if(returnData.return_code == 0){
            uploader2.queue=[];
            $scope.activityForm.viewImg= returnData.return_data.file_path;
toaster.pop("success","提示",'轮播图图片上传成功');
            
        }else{
            toaster.pop("error","提示",'轮播图图片上传失败');
        }
        angular.element("#filemask2").addClass("none")
    };


    $scope.initimg2 = function(file){
        var canvas = angular.element(document.getElementById("p3"));
        var reader = new FileReader();
        var params = {
            width:120,
            height:120
        };
        reader.onload = function(event){
       
            var img = new Image();
            img.onload = function(){
                var width = params.width || this.width / this.height * params.height;
                var height = params.height || this.height / this.width * params.width;
                canvas.attr({ width: width, height: height });
                canvas[0].getContext('2d').drawImage(this, 0, 0, width, height);
            };
            img.src = event.target.result;
            
        };
        reader.readAsDataURL(file);
    }

最后就可以上传图片了，写的不是特别细，自己慢慢看吧。

效果图就是下面