Question

我有一个应用程序，它是REACT前端和python flask后端。逻辑如下。

最终用户上传一个zip文件
示例zip文件结构

$(document).ready(function(){
 $('#load_data').click(function(){
  $.ajax({
   url:"OutputNew.csv",
   dataType:"text",
   success:function(data){
    var employee_data = data.split(/\r?\n|\r/);
    var table_data = '<button onclick="javascript:demoFromHTML()">PDF</button><input type="text" id="myInput" name="myInput" placeholder="color"><br><input type="text" id="myInputtext" name="myInput" placeholder="First Name"><br><div id="VMTable"><table id="myTable" class="table table-striped"">';
    // var table_data = '<input type="text" id="myInput" name="myInput" placeholder="color"><br><input type="text" id="myInputtext" name="myInput" placeholder="First Name"><br><table id="myTable" class="table table-striped"">';
    for(var count = 0; count<employee_data.length; count++) {
     var cell_data = employee_data[count].split(',');
     table_data += '<tr>';
     for(var cell_count=0; cell_count<cell_data.length; cell_count++){
      if(count === 0){
       table_data += '<th>'+cell_data[cell_count]+'</th>';
      }else{
          if(cell_data[cell_count] .includes("Not Matching")){
                var ret = cell_data[cell_count].replace('Not Matching','');
                if (ret == ""){
                  table_data += '<td>'+ret+'</td>'
                }else{
                  table_data += '<td data-color="red"><span class="badge-danger">'+ret+'</span></td>'
                }
          }else if(cell_data[cell_count] .includes("Matching")){
                var ret = cell_data[cell_count].replace('Matching','');
                if (ret == ""){
                  table_data += '<td>'+ret+'</td>'
                }else{
                  table_data += '<td data-color="green"><span class="badge-complete">'+ret+'</span></td>';
                }
          }else{
              table_data += '<td>'+cell_data[cell_count]+'</td>';
          }
      }
     }
     table_data += '</tr>';
    }
    table_data += '</table>';
    
    $('#employee_table').html(table_data);
   }
  });   
 }); 
});

我想从zip文件中提取extractfile1和extractfile2，然后用这两个提取的文件创建一个新的zip。完成后，我需要将此新的zip文件发送到后端服务。

我正在通过https://www.npmjs.com/package/unzip和https://www.npmjs.com/package/unzipper之类的节点程序包在Internet上找到各种解决方案，但这些方法也建议在后端解压缩文件，有没有办法在前端执行此任务，在REACT端结束。

Answer 1

我的回答是不。您应该在服务器端而不是浏览器中处理与文件（读/写）有关的所有事情。就像您上面的两个软件包一样，它用于NodeJS。当您让黑客使用Javascript修改文件并将其发送到服务器时，浏览器API不仅会读取/写入文件，还会带来安全隐患。

Answer 2

您可以使用JSZIP

示例：

const zip = new JSZip();
zip.loadAsync(<YOUR .ZIP FILE>).then(<YOUR FILES IN AN ARRAY>)

在REACT中解压缩文件，然后再次将其重新压缩

2 个答案: