Question

我在使用fineuploader库到我的angular2项目时遇到了问题。我没有找到一种方法来实现它，而不直接在索引html文件中使用fineuploader.js。是否有针对Typescript的实现示例？谢谢你

***Gulpfile***


    gulp.task('restore:fine-uploader', function () {
    gulp.src([
        'node_modules/fine-uploader/**/*.*'
    ]).pipe(gulp.dest(libs + 'fine-uploader'));
    });

    gulp.task('restore',
    [
    'restore:core-js',
    'restore:zone.js',
    'restore:reflect-metadata',
    'restore:systemjs',
    'restore:rxjs',
    'restore:angular-in-memory-web-api',
    'restore:angular',
    'restore:bootstrap',
    'restore:ng2-pagination',
    'restore:fine-uploader'
    ]);

***Systemjs.js***

    (function (global) {
    System.config({
        baseURL: "/",
        paths: {
            // paths serve as alias
            'npm:': './libs/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic':
                'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'ng2-pagination': 'npm:ng2-pagination',
            'fine-uploader': 'npm:fine-uploader',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            },
            fineUploader: {
                main: 'fine-uploader/fine-uploader.min',
                defaultExtension: 'js'
            },
}
    });
})(this);

**** **** upload.component.ts

import { Component } from '@angular/core';
import { FineUploader } from 'fineUploader';
@Component({
    selector: 'app-upload',
    templateUrl: './app/upload/upload.component.html'
})
export class UploadComponent {

}

Answer 1

使用declare var qq:any;不是正确的方法。这就是我做的工作：

第零步：在angular-cli.json文件中包含CSS和JS文件。

"styles": [
    "../node_modules/fine-uploader/fine-uploader/fine-uploader-gallery.min.css"
],
"scripts": [
    "../node_modules/fine-uploader/fine-uploader/fine-uploader.min.js"
],

第一步： 在组件文件的顶部添加/// <reference types="fine-uploader" />。

第二步：声明以下变量：

uploader: FineUploader.qq;
uiOptions: FineUploader.UIOptions;
coreEvents: FineUploader.CoreEvents;

第三步： 添加UI选项并在ngOnInit

中初始化FineUploader

this.uiOptions = {
    element: document.getElementById('qq-template'),
    template: "qq-template"
};
this.uploader = new qq.FineUploader(this.uiOptions);

第四步： 在COMPONENT_NAME.component.html文件中添加模板HTML。您可以在node_modules/fine-uploader/fine-uploader/templates/

中找到HTML

Answer 2

在systemjs.config中添加以下内容

'fineUploader': 'npm:fine-uploader'

和

fineUploader: {
    main: '/fine-uploader/fine-uploader.min',
    defaultExtension: 'js'
  },

在组件中添加

import {FineUploader} from 'fineUploader';

了解更多信息，您可以添加fine-uploader.d.ts 找到 https://raw.githubusercontent.com/FineUploader/fine-uploader/8d4c621ffc147d6c91fbcd68ba94482b94665078/typescript/fine-uploader.d.ts

Answer 3

好的，我想我已经明白了。 Fine-Uploader是一个JS库，没有我们可以使用的Typescript文件。我们可以直接将库导入我们的TS文件。解决方案是声明一个像{{1}}这样的精细上传器对象，我们可以在导出类中使用它。

Answer 4

官方解决方案可在Fine Uploader page上找到。

您只需要通过npm安装Fine Uploader并在您的打字稿文件中进行初始化（对于UI模式和传统端点）：

import { FineUploader } from 'fine-uploader';

let uploader = new FineUploader({...})

请注意，Fine Uploader模板不必位于index.html文件中的<script>标记中。

在任何组件中添加具有特定ID的<div hidden>标记内的模板就足够了。

使用FineUploader与Typescript（Angular2项目）

4 个答案: