0

我想,因为我对 Node 还很陌生,所以我不太了解如何将 NPM 包与我在 Node 上运行的 React 项目一起使用。

只是一个快速的解释:

我有一个通过 Node 服务器脚本上传 zip 文件的 React 组件。这部分工作得很好,但现在我正在做的下一步是让节点在上传到临时文件夹后将其解压缩..

我使用“axios”发布,使用“multer”保存到文件系统,“adm-zip”用于解压缩部分。

以下是我的 React 组件中的 on submit post 功能的快速浏览:

onSubmit = (e) => {
    e.preventDefault();
    const { description, selectedFile } = this.state;
    let formData = new FormData();

    formData.append('description', description);
    formData.append('selectedFile', selectedFile);

    console.log('form data ',formData)

    let that = this;

    axios.post('/', formData)
      .then((result, req) => {
        this.setState({imagePath: result.data.path})
        this.setState({fileName: result.data.filename})
        this.setState({fileUploadStatus:"Upload Successful.."})
        Unzip.extract(result.data.filename);
      })
      .catch(function (error) {
        console.log(error);
        //alert('File upload failed. Please ensure you are uploading a .zip file only')
        that.setState({fileUploadStatus:"Upload failed.. Please ensure you are uploading a .zip file only"})
      })
  }

这是我放在 React Component 顶部的内容:

import React, { Component } from 'react';
import axios from 'axios';
import Unzip from './unzip';

这是我的“unzip.js”文件:

var AdmZip = require('adm-zip');

// reading archives

module.exports = (function() {

  var extract = function extract(fileName, cb){ 

    zip = new AdmZip("../uploads/"+fileName);
    var zipEntries = zip.getEntries(); // an array of ZipEntry records

    zipEntries.forEach(function(zipEntry) {
      console.log(zipEntry.toString()); // outputs zip entries information
      if (zipEntry.entryName == "my_file.txt") {
           console.log(zipEntry.getData().toString('utf8')); 
      }
    });
    // extracts everything
zip.extractAllTo(/*target path*/"/home/me/zipcontent/", /*overwrite*/true);

  };

});

所以我正在努力的部分是了解如何使用可以从我的 React 组件访问的函数/属性(getter、setter 等)编写节点脚本 javascript 文件。

我试过这样的事情:

var AdmZip = require('adm-zip');

// reading archives

    var extract = function(thePath) { 

        zip = new AdmZip("../uploads/"+thePath);
        var zipEntries = zip.getEntries(); // an array of ZipEntry records

        zipEntries.forEach(function(zipEntry) {
          console.log(zipEntry.toString()); // outputs zip entries information
          if (zipEntry.entryName == "my_file.txt") {
               console.log(zipEntry.getData().toString('utf8')); 
          }
        });
zip.extractAllTo(/*target path*/"/home/me/zipcontent/", /*overwrite*/true);
        // extracts everything

      };

但是我收到错误说该功能不存在..所以我意识到我可能必须将其设置为具有导出功能的节点模块,但我也不知道如何让它工作..

有人可以向我解释一下处理这种类型的外部脚本(在 React 之外运行并返回或执行某种操作的脚本)的正确方法吗?

正如我在最近的其他一些问题中提到的那样,我是 Node 的初学者,所以请放轻松:)

谢谢!

4

1 回答 1

0

React 是一个前端包。您可以在后端使用解压缩等工具。例如使用 ExpressJS。

于 2018-07-30T21:05:43.453 回答