Question

我已经使用npm install安装了Fine Uploader库，并尝试导入文档中提到的精细上传器（http://docs.fineuploader.com/features/modules.html）

喜欢 -

从'fine-uploader'导入{qq};

但由于无法找到模块而给出错误。是否有任何事情需要做才能使这个工作？

Answer 1

您发布的代码未出现在文档中的任何位置。

您的代码假定存在“qq”的命名导出：

import {qq } from 'fine-uploader';

Fine Uploader不会声明任何命名导出，只会导出一个默认导出。你可以把它叫做任何你想要的东西，但是，为了匹配其余的文档，把它称为“qq”是有道理的。

如文档所示，您必须导入Fine Uploader，如下所示：

import qq from 'fine-uploader';

Answer 2

这就是我做的工作：

第零步：在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

精细上传器 - angular2 +打字稿

2 个答案: