将 FineUploader 与 Typescript 一起使用(Angular2 项目)
Use FineUploader with Typescript (Angular2 project)
我在将 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 {
}
在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
好的,我想我明白了。 Fine-Uploader 是一个 JS 库,没有我们可以使用的 Typescript 文件。我们不能直接将库导入我们的 TS 文件。解决方案是声明一个像 declare var qq:any;
这样的精细上传器对象,我们可以在导出 class.
中使用它
使用 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
官方解决方案可以在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 库用于我的 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 {
}
在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
好的,我想我明白了。 Fine-Uploader 是一个 JS 库,没有我们可以使用的 Typescript 文件。我们不能直接将库导入我们的 TS 文件。解决方案是声明一个像 declare var qq:any;
这样的精细上传器对象,我们可以在导出 class.
使用 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
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/
官方解决方案可以在Fine Uploader page.
上找到您只需通过 npm 安装 Fine Uploader 并像这样在您的打字稿文件中初始化(对于 UI 模式和传统端点):
import { FineUploader } from 'fine-uploader';
let uploader = new FineUploader({...})
请注意,Fine Uploader 模板不必位于 index.html 文件的 <script>
标记中。在任何组件中使用特定 id 在 <div hidden>
标签内添加模板就足够了。