终于拿下Angularjs中自定义上传文件！！！

2018年，新的一天，新的开始，今天终于把这个优化的需求改好了，记录一下。
2017年岁末的时候，我开始听知乎live,听了一篇忘记名字的大咖讲到，养成写博客的习惯，即可以帮助有需要的人，更重要的是能够帮你提升思维，特别是在技术遇到瓶颈时，写下一篇解决问题的技术博客，有助于重燃激情，废话不多讲…

实现需求：
1.根据设置的不同，可能有多个上传功能
2.流程是初始化为“上传表格”，选中后为“上传中…”，(请求结束后上传按钮才可点击)结束后为“继续上传”（按钮可以点击）

效果图：

list.html

<tbody>
    <tr ng-repeat="prize in prize_list">
        <td ng-bind="prize.name"></td>
        <td ng-bind="prize.code_cnt || 0"></td>
        <td>
            <dzp-file-upload index="$index" list="prize_list" ng-if="prize.status == 1" btn-name="上传表格" disable="prize.disable" change="uploadExcel(file, prize)"></dzp-file-upload>
            <dzp-file-upload index="$index" list="prize_list" ng-if="prize.status == 2" btn-name="上传中..." disable="prize.disable" change="uploadExcel(file, prize)"></dzp-file-upload>
            <dzp-file-upload index="$index" list="prize_list" ng-if="prize.status == 3" btn-name="继续上传" disable="prize.disable" change="uploadExcel(file, prize)"></dzp-file-upload>
       </td>
         <td ng-bind="prize.tip"></td>
    </tr>
</tbody>

list.js

//初始化数据：
 $scope.showCodeModal = function (dzp) {
        $scope.dzp_id = dzp.id;
        apiService.post("/werenwu/dzp/virtualPrize", { id: $scope.dzp_id }).success(function (res) {
            $scope.prize_list = [];
            res.data.list && res.data.list.forEach(function (value) {
                value.status = 1;
                value.index = '';
                value.disable = false;
                $scope.prize_list.push(value);
            });
            res.data.list.length == 0?$scope.dialog = true:$scope.dialog = false;
        });
        $("#code-modal").modal("show");
    };

//上传接口：
 $scope.uploadExcel = function (file, prize) {
     var form = new FormData();
     form.append("code_excel", file);
     form.append("prize", prize.prize);
     form.append("id", $scope.dzpList[0].id);
     setTimeout(function(){
         apiService.file("/werenwu/dzp/importCode", form).success(function (res) {
             if (res.errcode == 0) {
                 prize.code_cnt = res.data.total;
                 prize.tip = "上传完成，成功了" + res.data.success + "条， 失败了" + res.data.error + "条"
                } else {
                    swal("错误", res.errmsg, "error");
                }
                if(res.errcode!== ''){
                    for(var key in $scope.prize_list){
                        if($scope.prize_list[key].index == prize.index && $scope.prize_list[key].status == 2){
                            $scope.prize_list[key].status = 3;
                            $scope.prize_list[key].disable = false;
                        }
                    }
                }
            });
        }, 500);
    };

dzpFileUpload.html

<style>
    .fileUpload-wrap {
        position: relative;
    }
    .fileUpload-wrap input {
        position: absolute;
        top: 0;
        left: 0;
        width: 85px;
        bottom: 0;
        z-index: -1;
    }
</style>
    <div class="fileUpload-wrap">
        <button type="button" class="btn btn-success" ng-click="clickHandle()">{{btnName}}</button>
        <input ng-required="ngRequired" type="file" ng-style="inputStyle" ng-disabled="disable"/>
    </div>

dzpFileUpload.js

angular.module("app").directive("dzpFileUpload", [function () {
    return {
        scope: {
            fileBase64: '=',
            fileModel: '=',
            btnName: '@',
            reChooseName: '@',
            ngRequired: '=',
            inputStyle: '=',
            maxSize: '@',
            minSize: '@',
            fileType: '@',
            errorInfo: '@',
            showName: '@',
            change: "&",
            disable: "=disable",
            index: "=index",
            list: "=list",
        },
        restrict: "E",
        templateUrl: '/views/directives/dzpFileUpload.html',
        link: function (scope, element, attributes) {
            var rule = new RegExp(scope.fileType);
            var fileInput = element.find('input');
            scope.clickHandle = function () {
                fileInput.trigger('click');
            };
            scope.editList = function(status,current){
                for(var key in scope.list){
                    if(scope.index == key){
                        scope.list[key].status = status;
                        scope.list[key].index = current;
                        scope.list[key].disable = true;
                    }
                }
            }

            scope.reChooseName = scope.reChooseName ? scope.reChooseName : "重新选择";
            scope.$watch("fileModel", function () {
                if (!scope.fileModel) {
                    $(element[0]).find("input[type=file]").val("");
                }
            });
            fileInput.bind("change", function (changeEvent) {
                scope.current = changeEvent.originalEvent.path[4].rowIndex;
                scope.editList(2,scope.current);
                var file = changeEvent.target.files[0];
                if (!file) return;
                if (scope.fileType && !file.type.match(rule)) {
                    return swal(scope.errorInfo || '上传文件类型错误', '请重试', 'error')
                }
                if (scope.maxSize && file.size / 1024 > scope.maxSize) {
                    return swal('上传大小不能超过' + scope.maxSize / 1024 + "M", '请重试', 'error')
                }
                if (scope.minSize && file.size < scope.minSize) {
                    return swal('上传大小不能超过' + scope.minSize, '请重试', 'error')
                }
                if (file.name.length > 30) {
                    scope.filename = file.name.substr(0, 10) + "......" + file.name.substr(-12);
                } else {
                    scope.filename = file.name;
                }

                if (scope.change) {
                    scope.change({
                        "file": file
                    });
                }
                scope.fileModel = file;

                if (file.type.match(rule)) {
                    // 预览图片
                    var reader = new FileReader();
                    reader.onload = function (loadEvent) {
                        scope.$apply(function () {
                            scope.fileBase64 = loadEvent.target.result;
                        });
                    }
                    reader.readAsDataURL(file);
                }
            });
        }
    }
}]);

实现总结：

1.自定义指令好写，但真的写起来，中间再互相引用传值，就是控制器与指令之间如何修改想要的值，如果对scope作用域不了解，还是会遇到一些坑
2.网上不会有相同的需求，还是要自己去设计代码实现，也就是自己要有思路
3.自定义指令部分，只在为文件检验，上传做准备，看看文件上传的几个属性应该就可以
4.更合乎用户体验的需求，就要费点事了，主要是通过关联ng-repeat,ng-if,操控result添加自己需要控制状态的属性
实现：
4.1在数据集中添加自己需要控制状态的属性，做好初始化，在list.html,list.js中有
4.2在自定义指令dzpFileUpload.js中获取要改变的数据list,改变status和disabled,
4.3在请求结束后再次改变状态
4.4我之前是把要操控的数据放在了自定义指令中，把显示层做在了自定义的html片段上，这样在成功后修改状态时，在自定义指令中常规获取应该获取的还是没有改变的状态，要调用$watch检测，这样感觉影响性能（这是我上一版的做法，测试没有发现，是我自己点出来的，今天闲来无事完善了一下）