5

我目前正在使用 Meteor、ReactJS 和 React Router(用于路由)开发应用程序。我有一个要求,用户应该能够上传压缩的网站,并且 Meteor 应用程序需要将此网站显示为其中一个页面的一部分。

一个典型的 zip 文件将包含类似的模式,如下所示,

ZippedFolder
    |-- css
    |    |-- bootstrap.css
    |    |-- bootstrap.min.css 
    |    +-- style.css
    |-- js
    |    |-- bootstrap.js
    |    |-- bootstrap.min.js
    |    +-- script.js 
    +- index.html

我已经设置了 CollectionFS 来将 zip 文件存储到文件系统中,并使用 meteorhacks:npm 和几个 npm 包,我能够将该文件解压缩到已知位置。

HTMLContent = new FS.Collection("html_content", {
  stores: [new FS.Store.FileSystem("html_content"]
});

HTMLContent.on('stored', Meteor.bindEnvironment(function (fileObj) {
  let unzip = Meteor.npmRequire('unzip'),
    fs = Meteor.npmRequire('fs'),
    path = fs.realpathSync(process.cwd() +  '/../../../cfs/files/html_content/'),
    file = fs.realpathSync(path + '/' + fileObj.copies.html_content.key),
    output = path + '/' + fileObj._id;

    // TODO: Not the best ways to pick the paths. For demo only.

  if (!fs.existsSync(output)) {
    fs.mkdirSync(output);
  }
  fs.createReadStream(file).pipe(unzip.Extract({
    path: output
  }));
})); 

在 React 组件上,我正在使用以下代码片段上传压缩的 HTML 内容。

handleZIPUpload(event) {
  FS.Utility.eachFile(event, function(file) {
    HTMLContent.insert(file, function(err, fileObj) {
      if (err) {
        console.log(err);
      } else {
        console.log(fileObj);
      }
    });
  });
},

render(){
  return (
    <input id="html_content" type="file" onChange={this.handleZIPUpload}/>
  )
}

上传和解压缩工作。但是,CollectionFS 不提供解压缩路径中的 HTML 或其他内容。

 http://meteorhost/cfs/files/html_content/file_id/index.html

我还尝试将 html 内容解压缩到流星文件夹结构的公用文件夹中。但是,meteor 文档指出公用文件夹是用于静态资产的。因为它维护公用文件夹中资产的索引。所以它需要重新启动服务器来更新索引。

是否有任何其他位置可以放置可以按原样提供的 HTML 内容?

更新我通过设置 nginx 虚拟目录并将文件上传到该位置来解决此问题,以便 nginx 将提供 HTML 内容。

4

0 回答 0