Question

我想，因为我对Node还是很陌生，所以我不太了解如何在Node上运行的React项目中使用NPM包。

简要说明：

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

我正在使用“ 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组件顶部的内容：

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

      };

但是我收到错误消息，说该功能不存在..因此，我意识到可能必须将其设置为带有导出功能的Node Module，但我也无法弄清楚该如何工作。

有人可以向我解释处理此类外部脚本（在React外部运行并返回或执行某种动作的脚本）的正确方法吗？

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

谢谢！

Answer 1

React是一个前端程序包。您可以使用后端解压缩之类的工具。例如ExpressJS。

在React中使用Node Module

1 个答案: