angular.js封装的文件上传指令-优快云博客

本文介绍了一个使用AngularJS实现的图片上传功能，包括HTML结构、AngularJS指令和服务的编写方式。该方法通过七牛云存储服务进行图片上传，并返回图片URL。

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

今天把最近用到的东西整理一下，直接上代码，需要申请犀牛存储图片，文件

1.html

div
    div
        img.img-thumbnail.center-block(ng-src="{{ltUpload||'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=26528730,97133990&fm=21&gp=0.jpg'}}")
    label.btn.btn-danger.center-block 选择并上传
        input.hidden(type="file" tinfile file-fn="upload(file)" )

2.js

angular.module('app').directive('ltUpload',[function(){

    return {
        // name: '',
        // priority: 1,
        // terminal: true,
        scope: {
            ltUpload:'='
        }, // {} = isolate, true = child, false/undefined = no change
        controller:['$scope', '$element', '$attrs', '$transclude','$http','$rootScope', function($scope, $element, $attrs, $transclude,$http,$rootScope) {
            var config=angular.copy($rootScope.qiniuConfig);
            var token=config.UpToken;

　　　　　　　　//uuid
            function uuid() {
                var s = [];
                var hexDigits = (new Date()).getTime()+'abcehasjdkqwqwejkljada';
                for (var i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
                s[8] = s[13] = s[18] = s[23] = "-";

                var uuid = s.join("");
                return uuid;
            }
            $scope.upload=function(file){
                var key=uuid();
                var sendConfig = new FormData();
                sendConfig.append("file", file);
                sendConfig.append("token", token);
                sendConfig.append("key",key);
                $http.post('http://up.qiniu.com',sendConfig, {
                    transformRequest: angular.identity,
                    headers: {'Content-Type': undefined},
                    withCredentials:false
                }).success(function(data){
                    $scope.ltUpload ='http://'+config.recordPath+'/'+ key;
                });
            }
        }],
        // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
        // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
        // template: '<div ng-transclude></div>',
        templateUrl: 'app/dist/directive/ltUpload/index.html',
        replace: true,
        // transclude: true,
        // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
        link: function($scope, iElm, iAttrs, controller) {
            // console.log(iElm)
            // console.log(iAttrs);
        }
    }
}])

3.用法

　　.col-md-3(lt-upload='goodsInfo.thumbnail')　

转载于:https://www.cnblogs.com/s-quan/p/6141470.html