AngularJS仿微信文件缓存指令

最新推荐文章于 2022-11-10 11:09:35 发布
最新推荐文章于 2022-11-10 11:09:35 发布
阅读量689 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/s_mantou/article/details/78665913
AvicFile 是一个用于缓存和展示不同类型的文件（包括图片、视频和其他文件）的 Angular 指令组件。它支持缓存文件到本地，并提供缓存进度指示和文件打开功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 使用示例：

<avic-file file-src="{{testFileUrl}}" file-type="file"complete-callback="down">
    <div style="text-align:center;background:#eee;margin:5px;padding:25px">点击缓存附件</div>
</avic-file>

2. 参数说明：

① file-src：文件网络地址，缓存后下次无需重新下载，网址即为本地缓存文件名，

a. 浏览器缓存路径为：filesystem:http://{{address:port}}/temporary/avicit_portal/cache/;

b. Android缓存路径为：context.getFilesDir().toString() + "/files/avicit_portal/cache/”（可自行设置AVIC_CACHE_PATH）;

② file-type：强制文件类型，该值优先级大于后缀类型。

a. 当传入’file’或不传时，无论网络地址是否为图片都认定为文件附件，用户第一次点击时开始缓存，第二次点击则用file-openner打开；

b. 当传入’image’时，强制认定为图片格式并自动加载，适用于无后缀名的网络图片地址，如 http://dwz.cn/6Jxqci；

③ complete-callback：文件缓存展示完毕回调，此处应传入函数类型（不加括号）。

3. 样式说明：

① 附件样式：可自定义附件样式放于指令标签内，该内容会继续保留（ng-transclude）。

② 下载状态：指令添加单独的标签用于显示下载进度条及下载状态，无需设置。

③ 图片高宽：样式直接设置在avic-file标签上即可，如<avic-file class=”myClass”></avic-file>。



4. 流程图


5. 源码

angular.module('avicfile.directives', [])
    .directive('avicFile', function ($cordovaFile, $ionicPlatform, $cordovaFileTransfer, $timeout) {
        // const AVIC_CACHE_PATH = cordova.file.externalRootDirectory + 'Download/';
        // const AVIC_CACHE_PATH = 'file:///storage/emulated/0/' + 'Download/';
        const IMAGE = 'image';
        const VIDEO = 'file';
        const FILE = 'file';

        /**
         * 控制下载进度条
         * @param element
         * @param percentage 当100%时进度条消失
         */
        function changeProgress(element, percentage) {
            var template = '<div id="avic-file-cache-status" style="float: left;margin-left: 5%;margin-top: 5px;width: 90%; height: 5px; background-color: #ccc;">' +
                '<span style="display: block; width: ' + percentage + '%; height: 5px; background-color: #007aff;"></span>' +
                '</div>';
            if (element.lastChild && element.lastChild.id == 'avic-file-cache-status') {
                element.lastChild.outerHTML = template;
            } else {
                element.innerHTML += template;
            }
        }

        function showTemplate(element, src, type, status) {
            if (!fs.isCordova) {
                src = rootPath + src;
            }
            var template;
            if (!type) {
                type = getFileType(fileName);
            }
            switch (type) {
                case IMAGE:
                    template = '<img src="' + src + '" width="100%" ></img>';
                    element.innerHTML = template;
                    break;
                case FILE:
                // template = '<div><div style="text-align:center; background: #eee;margin: 5px;padding: 25px">打开' + getPointType(src) + '文件</div></div>';
                case VIDEO:
                // template = '<video src="' + src + '" width="100%" height="auto" controls="controls">您的浏览器不支持 video 标签。</video>';
                default:
                    template = '<p style="position: absolute;right: 20px;bottom: 6px;color: ' + (status == '已下载' ? '#999' : '#387ef5') + ';" id="avic-file-cache-status">' + status + '</p >';
                    if (element.lastChild && element.lastChild.id == 'avic-file-cache-status') {
                        element.lastChild.outerHTML = template;
                    } else {
                        element.innerHTML += template;
                    }
            }
        }

        /**
         * 获取后缀名
         * @param name
         * @returns {*}
         */
        function getPointType(name) {
            if (!name) {
                return 'nothing';
            }
            var arr = name.split('.');
            var type = arr[arr.length - 1];
            return type;
        }

        /**
         * 通过后缀名获取文件类型
         * @param name
         * @returns IMAGE为图片
         * @returns VIDEO为视频
         * @returns FILE为文件
         */
        function getFileType(name) {
            var type = getPointType(name);
            var res = 'unknown';
            switch (type) {
                case 'doc':
                case 'docx':
                case 'xls' :
                case 'xlsx':
                case 'txt':
                case 'ppt':
                case 'pptx':
                case 'pdf':
                    res = FILE;
                    break;
                case 'ogg':
                    ;
                case 'webm':
                    ;
                case 'mp4':
                    res = VIDEO;
                    break;
                case 'jpg':
                    ;
                case 'jpeg':
                    ;
                case 'png':
                    ;
                case 'gif':
                    ;
                case 'bmp':
                    ;
                case 'webp':
                default:
                    res = IMAGE;
            }
            return res;
        }

        /**
         * 缓存文件
         * @param url
         * @param targetPath
         */
        function downFile(url, targetPath, element, fileType, callback) {
            var trustHosts = true;
            var options = {};
            console.log('url : ' + url);
            console.log('targetPath : ' + targetPath);
            $cordovaFileTransfer.download(url, targetPath, options, trustHosts)
                .then(function (result) {
                    console.log(JSON.stringify(result));
                    $timeout(function () {
                        showTemplate(element, targetPath, fileType, '已下载');
                        if (typeof callback == 'function') {
                            callback();
                        }
                    }, 500)
                }, function (err) {
                    console.log(JSON.stringify(err));
                    alert('附件缓存失败');
                }, function (progress) {
                    $timeout(function () {
                        var percentage = (progress.loaded / progress.total) * 100;
                        console.log(percentage);
                        changeProgress(element, percentage);
                    });
                });
            // fs.download(url, targetPath, {retry: self._retry}, function (proces) {
            //     var percentage = proces.loaded / proces.total * 100;
            //     console.log(percentage + "% - loaded : " + proces.loaded + ": total : " + proces.total);
            //     changeProgress(element, percentage);
            // }).then(function (done) {
            //     console.log(JSON.stringify(done));
            //     $timeout(function(){
            //         showTemplate(element, targetPath, fileType, '已下载');
            //     },500)
            //
            // }, function (err) {
            //     console.log(JSON.stringify(err));
            //     alert('附件缓存失败');
            // });
        }

        /**
         * 通过file-opener2插件打开文件
         * @param path
         */
        function openFile(path) {
            var mime;
            var type = getPointType(path);
            switch (type) {
                case 'html':
                case 'htm':
                    mime = 'text/html';
                    break;
                case 'jpeg':
                case 'jpg':
                case 'jpe':
                    mime = 'image/jpeg';
                    break;
                case 'mp4':
                case 'mp4v':
                case 'mpg4':
                    mime = 'video/mp4';
                    break;
                case 'png':
                    mime = 'image/png';
                    break;
                case 'gif':
                    mime = 'image/gif';
                    break;
                case 'bmp':
                    mime = 'image/bmp';
                    break;
                case 'wbmp':
                    mime = 'image/vnd.wap.wbmp';
                    break;
                case 'apk':
                    mime = 'application/vnd.android.package-archive';
                    break;
                case 'json':
                    mime = 'application/json';
                    break;
                case 'dot':
                case 'doc':
                    mime = 'application/msword';
                    break;
                case 'docx':
                    mime = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
                    break;
                case 'xls' :
                    mime = 'application/vnd.ms-excel';
                    break;
                case 'xlsx':
                    mime = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                    break;
                case 'txt':
                case 'text':
                case 'conf':
                case 'def':
                case 'list':
                case 'log':
                case 'in':
                    mime = 'text/plain';
                    break;
                case 'ppt':
                case 'pps':
                case 'pot':
                    mime = 'application/vnd.ms-powerpoint';
                    break;
                case 'pptx':
                    mime = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
                    break;
                case 'pdf':
                    mime = 'application/pdf';
                    break;
                default:
                    break;
            }
            cordova.plugins.fileOpener2.open(
                path, // You can also use a Cordova-style file uri: cdvfile://localhost/persistent/Download/starwars.pdf
                mime,
                {
                    error: function (e) {
                        console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
                    },
                    success: function () {
                        console.log('file opened successfully');
                    }
                }
            );
        }

        return {
            restrict: 'E',
            template: function (elem, attr) {
                return '<div ng-click="downOrOpen()" ng-transclude=""></div>';
            },
            // scope: true,    //使用独立scope,防止指令之间的相互干扰
            scope: {
                completeCallback: '='
            },
            replace: true,
            transclude: true,
            link: function ($scope, $element, $attrs, controller) {
                var fileName = $attrs.fileSrc.replace(/\/|\\|:|\*|\||\?|%|'|"|<|>/g, '_');
                $ionicPlatform.ready(function () {
                    if (fs.isCordova) {
                        AVIC_CACHE_PATH = cordova.file.externalRootDirectory + 'Download/';
                        $cordovaFile.checkFile(AVIC_CACHE_PATH, fileName)
                            .then(function (success) {
                                console.log(JSON.stringify(success));
                                console.log('link - fileEntry:showTemplate');
                                showTemplate($element[0], AVIC_CACHE_PATH + fileName, $attrs.fileType, '已下载');
                                if (typeof $scope.completeCallback == 'function') {
                                    $scope.completeCallback();
                                }
                            }, function (error) {
                                console.log(JSON.stringify(error));
                                if ($attrs.fileType == 'image') {
                                    console.log('link - download');
                                    downFile($attrs.fileSrc, AVIC_CACHE_PATH + fileName, $element[0], $attrs.fileType, $scope.completeCallback);
                                } else {
                                    console.log('link - fail:showTemplate');
                                    showTemplate($element[0], AVIC_CACHE_PATH + fileName, $attrs.fileType, '未下载');
                                    if (typeof $scope.completeCallback == 'function') {
                                        $scope.completeCallback();
                                    }
                                }
                            });
                    } else {
                        AVIC_CACHE_PATH = APPNAME + '/cache/'
                        fs.exists(AVIC_CACHE_PATH + fileName)
                            .then(function (success) {
                                console.log(JSON.stringify(success));
                                console.log('link - fileEntry:showTemplate');
                                showTemplate($element[0], AVIC_CACHE_PATH + fileName, $attrs.fileType, '已下载');
                                if (typeof $scope.completeCallback == 'function') {
                                    $scope.completeCallback();
                                }
                            }, function (error) {
                                console.log(JSON.stringify(error));
                                if ($attrs.fileType == 'image') {
                                    console.log('link - download');
                                    downFile($attrs.fileSrc, AVIC_CACHE_PATH + fileName, $element[0], $attrs.fileType, $scope.completeCallback);
                                } else {
                                    console.log('link - fail:showTemplate');
                                    showTemplate($element[0], AVIC_CACHE_PATH + fileName, $attrs.fileType, '未下载');
                                    if (typeof $scope.completeCallback == 'function') {
                                        $scope.completeCallback();
                                    }
                                }
                            });
                    }

                });

                $scope.downOrOpen = function () {
                    console.log('downOrOpen - fileType: ' + $attrs.fileType);
                    if ('file' == $attrs.fileType) {
                        console.log('downOrOpen - ' + AVIC_CACHE_PATH + fileName)
                        // $cordovaFile.checkFile(AVIC_CACHE_PATH, fileName)
                        if (fs.isCordova) {
                            $cordovaFile.checkFile(AVIC_CACHE_PATH, fileName)
                                .then(function (fileEntry) {
                                        console.log('downOrOpen - openFile');
                                        showTemplate($element[0], AVIC_CACHE_PATH + fileName, $attrs.fileType, '已下载');//防止多个指令同一源情况显示下载状态错误
                                        openFile(AVIC_CACHE_PATH + fileName);
                                    },
                                    function (fail) {
                                        console.log('downOrOpen - download');
                                        downFile($attrs.fileSrc, AVIC_CACHE_PATH + fileName, $element[0], $attrs.fileType, $scope.completeCallback());
                                    });
                        } else {
                            fs.exists(AVIC_CACHE_PATH + fileName)
                                .then(function (fileEntry) {
                                        console.log('downOrOpen - openFile');
                                        showTemplate($element[0], AVIC_CACHE_PATH + fileName, $attrs.fileType, '已下载');
                                    },
                                    function (fail) {
                                        console.log('downOrOpen - download');
                                        downFile($attrs.fileSrc, AVIC_CACHE_PATH + fileName, $element[0], $attrs.fileType, $scope.completeCallback());
                                    });
                        }
                    }
                }
            }
        }
    });



文件系统之格式化与挂载
yonggeit的博客
04-25 5729
文件系统 定义 文件系统类型 Linux 文件系统 光盘iso9660 Windows fat32 ntfs Unix FFS fast UFS unix JFS2 网络文件系统NFS CIFS 集群文件系统GFS2 OCFS2 oracle 分布式文件系统 RAW 未经处理或者未经格式化产生的文件系统 根据其是否支持journal 功能 　日志型文件系统 ext3 ext4 xfs 非日志
Vue面试题汇总目录
歌谣的博客
12-01 1818
【Vue】 [vue] vue组件里的定时器要怎么销毁？ [vue] ＜template＞＜/template＞有什么用？ [vue] 你有使用过JSX吗？说说你对JSX的理解 [vue] 使用vue渲染大量数据时应该怎么优化？说下你的思路！ [vue] vue组件会在什么时候下被销毁？ [vue] vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？ [vue] 说说你对Object.defineProperty的理解 [vue] 在子组件中怎么访问到父组件的实例？ [
AngularJS中的缓存
diankan7855的博客
03-01 145
欢迎大家指导与讨论 : ） 　　缓存篇 　　一个缓存就是一个组件，它可以透明地储存数据，以便以后可以更快地服务于请求。多次重复地获取资源可能会导致数据重复，消耗时间。因此缓存适用于变化性不大的一些数据，缓存能够服务的请求越多，整体系统性能就能提升越多。 　　$cacheFactory与缓存对象 　　$cacheFactory是一个为Angular服务生产缓存对象的服务。要创建一个...
angular ionic 解决微信页面缓存问题
weixin_30735745的博客
08-15 419
# 在路由对应的页面路径后面加时间戳 .state('viewName', { url: '/viewName', cache: false, templateUrl: function(){ return 'test/viewName.html?' + new Date().getTime() ...
微信缓存清理
tanqiaoxing的博客
03-20 713
1、ios清理微信缓存方法退出—重新登录2、android清理微信缓存方法http://debugx5.qq.com/
关于angularJs清除浏览器缓存的方法
相约9.28,幸福那一刻
08-03 8585
浏览器缓存，有时候我们需要他，因为他可以提高网站性能和浏览器速度，提高网站性能。但是有时候我们又不得不清除缓存，因为缓存可能误事，出现一些错误的数据。像股票类网站实时更新等，这样的网站是不要缓存的，像有的网站很少更新，有缓存还是比较好的。 以下是传统的清除浏览器的方法 meta方法 //不缓存 清理form的临时缓存 ajax清除缓存 $.ajax(
下载excel打开后弹出警告提示，文件类型和文件内容不符问题处理
jzt_designer的专栏
07-21 1万+
在网页下载excel时，一定要正确设置response头中的content-type；即设置正确的mime type,具体设置如下： Ext   MIME Type   .doc   application/msword   .dot   application/msword   ...
最新AngularJS开发宝典视频教程 后盾网AngularJS培训视频教程 后盾网.txt
09-02
├最新AngularJS开发宝典—第027讲 AngularJS 弹性盒模型+bootStrap 开发微信菜单前端之根据微信SDK文档部署数据.mp4 ├最新AngularJS开发宝典—第028讲 弹性盒模型+bootStrap 开发微信菜单前端之根据菜单类型控制...
微信小程序中的数据绑定与渲染技巧
微信小程序中的数据绑定简介 #### 1.1 数据绑定的概念和作用 数据绑定是指将数据与视图进行关联，当数据发生变化时，视图也随之更新。在微信小程序中，数据绑定能够使得页面与数据同步更新，提高用户体验。 ####...
微信导航页数据绑定与状态管理：前端数据流动的策略与实践
微信导航页作为用户交互的核心界面，其数据绑定与状态管理的有效实现对用户体验至关重要。本文详细探讨了数据绑定与状态管理在微信导航页中的应用，从理论基础到实践技巧进行了系统性论述。首先介绍了前端数据流动的...
POI导出Excel
sumu_的专栏
06-15 2717
百度NeurIPS全球顶会冠军团队，带你7日从零实践强化学习！>>> ...
PHP文件上传后缀名与文件类型对照表
zxy199288的博客
09-15 2613
php上传常见文件类型对应的$_FILES[“file”][“type”] 1、xls application/vnd.ms-excel 2、xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 3、ppt application/vnd.ms-powerpoint 4、pptx application/vnd.openxmlformats-officedocument.presentationml.presentat.
文件上传（模板导出、批量导入）
qq_42181155的博客
11-10 7836
excel模板导入导出功能，用于批量导入数据到库
C# 使用openxml解析PPTX中的文本内容
璨曌未央的专栏
06-15 1344
目录 一、依赖类库 二、解析步骤 1.引入库 2.读取数据 2.1 直接保存在slide*.xml文件的节点数据 2.2以oleObject对象的形式存储在word文档中 2.3 以oleObject对象的形式存储在bin文件中 参考资料： 前言 本文讨论的仅针对微软Office 2007以后的（OOXML定义）PowerPoint文档，Office 2007以前的用二进制格式定义的（ppt格式）文档不在本文讨论范围。 一、依赖类库 本文需要依赖两个免费的第三...
解决微信内置浏览器的缓存问题
hangdianyizhihua的专栏
08-10 3868
微信为了提高浏览器的响应速度和用户的体验，默认具有缓存功能。 解决方法如下所示： 1、在url后加一个参数，如下所示： ，其实这跟改变css文件的名字以及用时间戳的本质是一样的 2、用md5(据说该方法比较好，还未研究。。。) ps：网上有很多方法在jsp中加入如下代码： 但是，貌似不起作用。
ContenType类型大全(包括Office2007文件等问题的解决办法)
热门推荐
随手记两笔
10-10 2万+
content-type用于定义用户的浏览器或相关设备如何显示将要加载的数据，或者如何处理将要加载的数据，此属性的值可以查看 MIME 类型。 MIME (Multipurpose Internet Mail Extensions，多用途互联网邮件扩展)是描述消息内容类型的因特网标准。MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。 content-type 一般以下面的
angularjs html编辑器,AngularJS集成wangeditor富文本编辑器
weixin_39978350的博客
06-19 299
最近用AngularJS2(ng alain)搭建的项目需求中须要富文本，在网上找了不少，要么过重，要么没有详细的集成步骤。css 下面将我本身如何将wangeditor集成在项目(项目名称myPro)中的，详细列出。html具体操做步骤操做步骤参考：node编辑器操做参考文档：github可是仍是没起来，控制台报错，找不到元素。只能本身修改了。json(1)安装wangeditor项目跑起来以后...
ionic 项目文件下载总结
09-30 2620
一、前景最近项目中使用了文件下载，在这过程中遇到了大量问题，也查阅了大量资料，发现很多问题都是答非所问，于是写篇总结，避免再次掉坑！二、插件简介cordova项目的文件下载一般会使用到cordova-plugin-file、cordova-plugin-file-transfer、cordova-plugin-file-opener2三个插件。1.cordova-plugin-file –用于访问设
AngularJS整合微信UI(WeUI)实战教程
"Angularjs整合微信UI（weui） 本文主要介绍如何将微信推出的UI库WeUI集成到AngularJS项目中，适用于已有AngularJS基础并熟悉ngRoute和ngAnimate的开发者。作者通过自己的实践，分享了整合过程中的关键步骤和注意...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值