angular 怎么使用aliyun-sdk

Question

在angular中使用aliyun-sdk 上传视频报错,但是直接直接使用的话是没有问题的,一旦集成到angular中就报错,跪求解决

import '../../../config/vod-sdk-upload-1.1.0.min.js';
import '../../../config/aliyun-sdk.min.js';
let VideoUpload = ($timeout, ResourceService) => {

return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
        play: '@',
        cover: '@',
        source: '@',
    },
    template: require('../html/video-upload.html'),

    link: function(scope, elem, attrs) {
    $timeout(()=>{
        var uploadAuth = 'eyJTZWN1cml0eVRva2VuIjoiQ0FJU3pBUjFxNkZ0NUIyeWZTaklxWURUQ05lTXRlMWc4b0c2Wkh6L2t6Yy9QN2RXZ3BiOGl6ejJJSHBLZVhkdUFlQVhzL28wbW1oWjcvWVlsclVxRnM0YUZSZVVOcEF2dHNVR3ExajdKcGZadjh1ODRZQURpNUNqUWNGc3hJTm9uNTI4V2Y3d2FmK0FVQm5HQ1RtZDVNY1lvOWJUY1RHbFFDWnVXLy90b0pWN2I5TVJjeENsWkQ1ZGZybC9MUmRqcjhsbzF4R3pVUEcyS1V6U24zYjNCa2hsc1JZZTcyUms4dmFIeGRhQXpSRGNnVmJtcUpjU3ZKK2pDNEM4WXM5Z0c1MTlYdHlwdm9weGJiR1Q4Q05aNXo5QTlxcDlrTTQ5L2l6YzdQNlFIMzViNFJpTkw4L1o3dFFOWHdoaWZmb2JIYTlZcmZIZ21OaGx2dkRTajQzdDF5dFZPZVpjWDBha1E1dTdrdTdaSFArb0x0OGphWXZqUDNQRTNyTHBNWUx1NFQ0OFpYVVNPRHREWWNaRFVIaHJFazRSVWpYZEk2T2Y4VXJXU1FDN1dzcjIxN290ZzdGeXlrM3M4TWFIQWtXTFg3U0IyRHdFQjRjNGFFb2tWVzRSeG5lelc2VUJhUkJwYmxkN0JxNmNWNWxPZEJSWm9LK0t6UXJKVFg5RXoycExtdUQ2ZS9MT3M3b0RWSjM3V1p0S3l1aDRZNDlkNFU4clZFalBRcWl5a1QwdEZncGZUSzFSemJQbU5MS205YmFCMjUvelcrUGREZTBkc1Znb0xGS0twaUdXRzNSTE5uK3p0Sjl4YUZ6ZG9aeUlrL1dWcXNnNVNGQit1NGdIVTEvQWY4b3k4bGxqL3FYcjhWT044ZVB1VlRmbzNCSmhxb2FEb2RZZnRCTTZKNjM0MjdMTmhGT0U0aXpNTzV0ZXNkek1SV2hpVFM2d2YzRkUyLzJJamhvRjNVdGJ6VHpxWlU1UHVnblBqampvTFpSTGlPYjM3M2RGRTdwVnArUFVjRDZwNVY1OEV1aU81N3NicUUyVnVoU2xrSjBhZ0FFQjJySmlyUEkxUXVWekhseWxGMHp3ZVdxSXNCSFVEVnRQeXRkc0w0YUFmSERIWkc4OWcxTzA2WjhJbmRwUk5yZXAwQnk1VzVjNXZjQk9xaEo1QnVQc2kwOFV5cmZQYml5alNYeTJoTVRaOVNlRzJZem9uQW9mdWFDTmo4UVk4US9nOVh4QUJMZmJwMGw5Qm03QzY1NWpCTUR4TUtBWm5RUHNmUDZmcCt1cmV3PT0iLCJBY2Nlc3NLZXlJZCI6IlNUUy5IQ2ZDbThYMkFFQ1FmWk53N2ozOHptU1dpIiwiQWNjZXNzS2V5U2VjcmV0IjoiQTdoWHIxNFNUNW9KakdOYW1ac0Nrb3A2UEdEZFNySzhjaUtKNE1YeUg0RGgiLCJFeHBpcmF0aW9uIjoiMzEyNCJ9';
        var uploadAddress = 'eyJFbmRwb2ludCI6Imh0dHBzOi8vb3NzLWNuLXNoYW5naGFpLmFsaXl1bmNzLmNvbSIsIkJ1Y2tldCI6ImluLTIwMTcxMTEzMTAzODUwMDY2LWZ0NzVtbXVmMXYiLCJGaWxlTmFtZSI6InZpZGVvLzMzN0VDQTYxLTE1RkJFNzk5NENCLTE1OTctODM4My0zNzAtOTkyMzIubXA0In0'
        var uploader = new VODUpload({
            // 文件上传失败
            'onUploadFailed': function (uploadInfo, code, message) {
                console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
            },
            // 文件上传完成
            'onUploadSucceed': function (uploadInfo) {
                console.log("object:" + uploadInfo.object, uploadInfo.GetPlayInfo);
                console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
            },
            // 文件上传进度
            'onUploadProgress': function (uploadInfo, totalSize, uploadedSize) {
                console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(uploadedSize * 100 / totalSize) + "%");
            },
            // STS临时账号会过期，过期时触发函数
            'onUploadTokenExpired': function () {
                console.log("onUploadTokenExpired");
            },
            // 开始上传
            'onUploadstarted': function (uploadInfo) {
                console.log(uploadInfo);
                console.log(uploader);

                if (uploadAuth) {
                    uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress);
                }
                console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
            }
        });

        if (uploadAuth) {
            uploader.init();
        } else if (isSTSMode()) {
            // OSS直接上传:STS方式，安全但是较为复杂，建议生产环境下使用。
            // 临时账号过期时，在onUploadTokenExpired事件中，用resumeWithToken更新临时账号，上传会续传。
            uploader.init(accessKeyId, accessKeySecret, secretToken, expireTime);
        } else {
            // OSS直接上传:AK方式，简单但是不够安全，建议测试环境下使用。
            uploader.init(accessKeyId, accessKeySecret);
        }

        document.getElementById("files")
            .addEventListener('change', function (event) {
                var userData;
                if (uploadAuth) {
                    userData = '{"Vod":{"UserData":"{"IsShowWaterMark":"false","Priority":"7"}"}}';
                } else {
                    userData = '{"Vod":{"Title":"this is title.我是标题","Description":"this is desc.我是描述","CateId":"19",\
            "Tags":"tag1,tag2,标签3","UserData":"user data"}}';
                }

                for(var i=0; i<event.target.files.length; i++) {
                    console.log("add file: " + event.target.files[i].name);
                    if (uploadAuth) {
                        // 点播上传。每次上传都是独立的OSS object，所以添加文件时，不需要设置OSS的属性
                        uploader.addFile(event.target.files[i], null, null, null, userData);
                    } else {
                        uploader.addFile(event.target.files[i], endpoint, bucket, objectPre + event.target.files[i].name, userData);
                    }
                }
                uploader.startUpload();

            });

        function start() {
            console.log("start upload.");
            uploader.startUpload();
        }

        function isVodMode() {
            var uploadAuth = 'eyJTZWN1cml0eVRva2VuIjoiQ0FJU3pBUjFxNkZ0NUIyeWZTaklySzN5SVB1QnRhWVkwWkM4Y0hMaDFVZzZidTFXM3AyZHFqejJJSHBLZVhkdUFlQVhzL28wbW1oWjcvWVlsclVxRnM0YUZSZVVOcEF2dHNVR3ExajdKcGZadjh1ODRZQURpNUNqUWFJN3c1aG9uNTI4V2Y3d2FmK0FVQm5HQ1RtZDVNY1lvOWJUY1RHbFFDWnVXLy90b0pWN2I5TVJjeENsWkQ1ZGZybC9MUmRqcjhsbzF4R3pVUEcyS1V6U24zYjNCa2hsc1JZZTcyUms4dmFIeGRhQXpSRGNnVmJtcUpjU3ZKK2pDNEM4WXM5Z0c1MTlYdHlwdm9weGJiR1Q4Q05aNXo5QTlxcDlrTTQ5L2l6YzdQNlFIMzViNFJpTkw4L1o3dFFOWHdoaWZmb2JIYTlZcmZIZ21OaGx2dkRTajQzdDF5dFZPZVpjWDBha1E1dTdrdTdaSFArb0x0OGphWXZqUDNQRTNyTHBNWUx1NFQ0OFpYVVNPRHREWWNaRFVIaHJFazRSVWpYZEk2T2Y4VXJXU1FDN1dzcjIxN290ZzdGeXlrM3M4TWFIQWtXTFg3U0IyRHdFQjRjNGFFb2tWVzRSeG5lelc2VUJhUkJwYmxkN0JxNmNWNWxPZEJSWm9LK0t6UXJKVFg5RXoycExtdUQ2ZS9MT3M3b0RWSjM3V1p0S3l1aDRZNDlkNFU4clZFalBRcWl5a1QwdEZncGZUSzFSemJQbU5MS205YmFCMjUvelcrUGREZTBkc1Znb0xGS0twaUdXRzNSTE5uK3p0Sjl4YUZ6ZG9aeUlrL1dWcXNnNVNGQit1NGdIVTEvQWY4b3k4bGxqL3FYcjhWT044ZVB1VlRmbzNCSmhxb2FEb2RZZnRCTTZKNjM0MjdMTmhGT0U0aXpNTzV0ZXNkek1SV2hpVFM2d2YzRkUyLzJJamhvRjNVdGJ6VHpxWlU1UHVnblBqampvTFpSTGlPYjM3M2RGRTdwVnArUFVjRDZwNVY1OEV1aU81N3NicUUyVnVoU2xrSjBhZ0FFSEs3MHJzczIzMFpJSEcwcWFtMEpldXp2K0MzWEJRdzFjUmRXZ2RyS1dxS1JQUnlYb01COFRSNy9XOUN1dDl2Z2tuWHpXaGFWS1o0NHBabXlwaUNSZXNmTitkWmIxbHRlR1I5OE5hZzc4dXJtbjVPeWRVeTRVYnpIT2R2cmRlZUkycVFPSUl3TldmZHg1OUhhYlZRKzR6OXJxY0FaZjRUV2lIKzVkQXdNTDN3PT0iLCJBY2Nlc3NLZXlJZCI6IlNUUy5NbkdrQTVYeTlmUldyVFAxSG9iYnoxWDZIIiwiQWNjZXNzS2V5U2VjcmV0IjoiMlZxSlNma1F3RllobVUzRXNFbjFMazhIRjFyV3FBYVFOemZlNkZBZW5xa2YiLCJFeHBpcmF0aW9uIjoiMjU1MCJ9';
            return (uploadAuth && uploadAuth.length > 0);
        }
    })
    }
}

}
VideoUpload.$inject = ['$timeout', 'ResourceService'];

module.exports = (ngMold) => {

ngMold.directive('videoUpload', VideoUpload);

}

<div>
上传管理

<input type="file" name="file" id="files" multiple/>
<hr/>
<button type="button" ng-click="start()">开始上传</button>

</div>

Answer 1

没代码不知道你说的什么。

多半是时序问题吧。你贴的代码，只有 videoUpload 的定义，也没有使用的地方。

Answer 2

谢邀，图太小看不清，建议在开发时不用min压缩版本的文件。
1 来调试不方便 2 来压缩后有时候会移除一些显示错误信息的代码。

Answer 3

谢谢邀请，就说两点

• 第一点和问题本身没关系，只是建议以后对于问题的描述尽量清晰简明，光贴代码或者截图并不能提供更多的信息供帮你解决问题的人参考，建议增加一些说明，比如你在哪里遇到问题了，具体是什么问题等等的描述

• 第二点是我关于问题的一些推测，因为我发现你加了webpack的标签，同时在模块化方面使用了import/export，对于sdk使用了import的语法，等价于直接把sdk.js的打包到bundle.js，这种写法如果sdk.js符合umd模块化标准是没有问题，但是如果它仅仅提供是在window加一个的全局变量则需要在webpack中配置一些类库变量暴露规则，详见external