angularJS实现文件上传、下载、删除操作

FileUploader 文件下载

导入JS文件

    <script src="bower_components/angular-file-upload.min.js"></script>   

app.添加module

 

angular.module('uniplatform', ['angularFileUpload']）   //angularFileUpload

 

上传文件按钮(.html文件)

<input style="display: inline;" type="file" nv-file-select uploader="uploader" accept="" />　　　　//type='file'
<button gm-access="/user_attachment/upload_file" class="btn btn-sm btn-primary" ng-click="vm.uploadAccessory()">上传</button>

上传文件(.js文件)

 

//依赖注入
AccessoryController.$inject = ['$scope','$routeParams','FileUploader'];
function AccessoryController($scope,$routeParams,FileUploader) {
    
　　　　　var vm = this;
        //接受route参数
        vm.searchName = $routeParams.username;
        vm.searchID = $routeParams.userid;

　　　　　vm.allAccessory = [];
        vm.listAccessory = listAccessory;
　　　　　vm.uploadAccessory = uploadAccessory;
　　　　
　　　　//分页
　　　　　vm.pageConf = {
            currentPage: 1,
            totalItems: 0,
            itemsPerPage: 10,
            pagesLength: 15,
            perPageOptions: [10, 20, 30, 40, 50],
            onChange: function(){
                listAccessory();
            }
        };
　　　　
　　　　//获取列表数据展示
　　　　　function listAccessory() {
            var requestJson = {"page_index":vm.pageConf.currentPage-1,"page_size":vm.pageConf.itemsPerPage};
            if (vm.searchName == $routeParams.username) {//用户名没有改动
                // requestJson["user_id"] = vm.searchID;
                requestJson["user_id"] = '08e1a5b467ca48539b21149f4f4da99a';
            }else{
                if (vm.searchName) {
                    // requestJson["username"] = vm.searchName;
                }
            }
            HTTPService.post('/user_attachment/get_scan_file',requestJson)
            .then(function (res) {
                if(res.code == 0)    
                {
                    vm.pageConf.totalItems = res.data.total_count;
                    vm.allAccessory = res.data.file_list;
                }else{
                    toastr.error(res.message);
                }
                
       });
　　　　if (vm.searchName == $routeParams.username) {//用户名没有改动
            // requestJson["user_id"] = vm.searchID;
            var user_id = '08e1a5b467ca48539b21149f4f4da99a';
        }else{
            if (vm.searchName) {
                // requestJson["username"] = vm.searchName;
            }
        }
        $scope.userId = user_id;

　　　　//文件上传接口代码
        $scope.uploader = new FileUploader({
            url: '/platform/uniplatform/user_attachment/upload_file',
            alias: 'file',
            method: 'POST',
            // autoUpload: false,
            // queueLimit: 1,
            formData: [{
                user_id: $scope.userId
            }]
        });

　　　　//点击上传按钮执行函数，成功和失败提示信息并更新列表展示
　　　　function uploadAccessory(){
            $scope.uploader.uploadAll();
            //关于上传队列的进展
            $scope.uploader.onSuccessItem = function(fileItem, response, status, headers) {
                alert(response.message);
                $("input[type='file']").val('');
                listAccessory();
            };
            //上传出错时触发
            $scope.uploader.onErrorItem = function(fileItem, response, status, headers) {
                alert(response.message);
                $("input[type='file']").val('');
                listAccessory();
            };
        }
}

 

 

下载

下载（.html）

<button gm-access="/user_attachment/down_scan_file" class="btn btn-sm btn-primary" ng-click="vm.downAccessory(accessory)">下载</button>

下载（.js文件）

 

//依赖注入
AccessoryController.$inject = ['$scope','$routeParams','FileUploader'];
function AccessoryController($scope,$routeParams,FileUploader) {
    
　　　　　var vm = this;
        //接受route参数
        vm.searchName = $routeParams.username;
        vm.searchID = $routeParams.userid;

　　　　　vm.allAccessory = [];
        vm.listAccessory = listAccessory;
        vm.downAccessory = downAccessory;
　　　　
　　　　//分页
　　　　　vm.pageConf = {
            currentPage: 1,
            totalItems: 0,
            itemsPerPage: 10,
            pagesLength: 15,
            perPageOptions: [10, 20, 30, 40, 50],
            onChange: function(){
                listAccessory();
            }
        };
　　　　
　　　　//获取列表数据展示
　　　　　function listAccessory() {
            var requestJson = {"page_index":vm.pageConf.currentPage-1,"page_size":vm.pageConf.itemsPerPage};
            if (vm.searchName == $routeParams.username) {//用户名没有改动
                // requestJson["user_id"] = vm.searchID;
                requestJson["user_id"] = '08e1a5b467ca48539b21149f4f4da99a';
            }else{
                if (vm.searchName) {
                    // requestJson["username"] = vm.searchName;
                }
            }
            HTTPService.post('/user_attachment/get_scan_file',requestJson)
            .then(function (res) {
                if(res.code == 0)    
                {
                    vm.pageConf.totalItems = res.data.total_count;
                    vm.allAccessory = res.data.file_list;
                }else{
                    toastr.error(res.message);
                }
                
       });
　　　　if (vm.searchName == $routeParams.username) {//用户名没有改动
            // requestJson["user_id"] = vm.searchID;
            var user_id = '08e1a5b467ca48539b21149f4f4da99a';
        }else{
            if (vm.searchName) {
                // requestJson["username"] = vm.searchName;
            }
        }
        $scope.userId = user_id;
　　　　　
　　　　//下载函数
　　　　function downAccessory(name){
            var requestJson = {"file":name}
            if (vm.searchName == $routeParams.username) {//用户名没有改动
                // requestJson["user_id"] = vm.searchID;
                requestJson["user_id"] = '08e1a5b467ca48539b21149f4f4da99a';
            }else{
                if (vm.searchName) {
                    // requestJson["username"] = vm.searchName;
                }
            }
            HTTPService.post('/user_attachment/down_scan_file',requestJson)
            .then(function (res) {
                // var reader = new FileReader();
                // reader.readAsDataURL(res.data.url);
                // reader.onload = function (e) {
                    // 创建一个a标签用于下载
                    var a = document.createElement('a');
                    a.download = res.data.url;
                    a.href = res.data.url;
                    $("body").append(a);
                    a.click();
                    $(a).remove();
                // }
            });
        }
}

 

删除

删除（.html）

<button gm-access="/user_attachment/del_scan_file" class="btn btn-sm btn-danger" ng-click="vm.deleteAccessory(accessory)">删除</button>

删除（.js文件）

//依赖注入
AccessoryController.$inject = ['$scope','$routeParams','FileUploader'];
function AccessoryController($scope,$routeParams,FileUploader) {
    
　　　　　var vm = this;
        //接受route参数
        vm.searchName = $routeParams.username;
        vm.searchID = $routeParams.userid;

　　　　　vm.allAccessory = [];
        vm.listAccessory = listAccessory;
        vm.deleteAccessory = deleteAccessory;
　　　　
　　　　//分页
　　　　　vm.pageConf = {
            currentPage: 1,
            totalItems: 0,
            itemsPerPage: 10,
            pagesLength: 15,
            perPageOptions: [10, 20, 30, 40, 50],
            onChange: function(){
                listAccessory();
            }
        };
　　　　
　　　　//获取列表数据展示
　　　　　function listAccessory() {
            var requestJson = {"page_index":vm.pageConf.currentPage-1,"page_size":vm.pageConf.itemsPerPage};
            if (vm.searchName == $routeParams.username) {//用户名没有改动
                // requestJson["user_id"] = vm.searchID;
                requestJson["user_id"] = '08e1a5b467ca48539b21149f4f4da99a';
            }else{
                if (vm.searchName) {
                    // requestJson["username"] = vm.searchName;
                }
            }
            HTTPService.post('/user_attachment/get_scan_file',requestJson)
            .then(function (res) {
                if(res.code == 0)    
                {
                    vm.pageConf.totalItems = res.data.total_count;
                    vm.allAccessory = res.data.file_list;
                }else{
                    toastr.error(res.message);
                }
                
       });
　　　　if (vm.searchName == $routeParams.username) {//用户名没有改动
            // requestJson["user_id"] = vm.searchID;
            var user_id = '08e1a5b467ca48539b21149f4f4da99a';
        }else{
            if (vm.searchName) {
                // requestJson["username"] = vm.searchName;
            }
        }
        $scope.userId = user_id;
　　　　　
　　　　//删除函数
　　　　function deleteAccessory(name){
            var requestJson = {"file":name}
            if (vm.searchName == $routeParams.username) {//用户名没有改动
                // requestJson["user_id"] = vm.searchID;
                requestJson["user_id"] = '08e1a5b467ca48539b21149f4f4da99a';
            }else{
                if (vm.searchName) {
                    // requestJson["username"] = vm.searchName;
                }
            }
            HTTPService.post('/user_attachment/del_scan_file',requestJson)
            .then(function (res) {
                listAccessory();
            });
        }
}

 

2021-07-05  15:12:13