Блог

Мне было поручено удалить определенные непечатаемые символы из файла .srt, и я поступил следующим образом.
1) импортировать файл

2) считывает файл как текст

3) используйте регулярное выражение для замены непечатаемых символов

4) преобразуйте текст обратно в файл и прикрепите к атрибуту href в теге привязки для загрузки.

Пожалуйста, ознакомьтесь с моим подходом.

Однако этап передачи dataURL в атрибут href, похоже, не работает. Моя консоль.операторы журнала показывают dataURL, но по какой-то причине он не передается в атрибут href. Когда я загружаю файл и открываю его, это пустой файл, в котором просто написано «undefined».

Пожалуйста, сообщите

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React, { Component } from 'react';
import './App.css';


class App extends Component {
  constructor(props) {
    super(props);
    this.uploadFile = this.uploadFile.bind(this);
  }

  uploadFile(e) {
    let file = e.target.files[0];
    if(file) {
      console.log(file);
      let textReplaced;
      let originalFileAsText;
      let output;
      //var aTag1 = document.getElementById('original');
      var aTag2 = document.getElementById('modified');
      const reader1 = new FileReader();
      reader1.onload = function(event) {
        console.log(event.target.result);
        originalFileAsText = reader1.result;
        textReplaced = originalFileAsText.replace(/rn(?=rn)(?=^d $)/g, /n/);
      }
      reader1.readAsText(file);


      output = new File([textReplaced], "", {type: "text/plain"})
      console.log(output);
      const reader2 = new FileReader();
      reader2.onload = function(event) {
        console.log("result --->", reader2.result);
        console.log("eTargetRes--->",event.target.result);
        aTag2.href = reader2.result;
        console.log(aTag2.href)
      }
      reader2.readAsDataURL(output);

    }
  }

  render() {
    return (
      <div className="App">
        <input type="file"
        name="og"
        onChange={this.uploadFile}/>
        <div id="text-container" style={{"display" : "flex", "flexDirection" : "row", "justifyContent" : "space-evenly"}}>
          <a href="" download="original_file.srt" style={{"width":"200px"}} id="original" name="original" alt="original"> uploaded file </a> 
          <a href="" download="modified_file.txt" style={{"width":"200px"}} id="modified" name="modified" alt="modified"> modified file </a>
        </div>
      </div>
    );
  }
}

export default App
 

Этот пример, похоже, работает просто отлично. Имейте в виду FileReader , что он работает асинхронно. Вы должны подождать, чтобы настроить 2-й считыватель, пока не будет выполнен первый.

В этом случае ведение журнала консоли вводит в заблуждение. Вот очищенная версия метода uploadFile для рассмотрения. Это немного побочный эффект, но он проще и работает.

  uploadFile(e) {
    let file = e.target.files[0];
    if(file) {
      const reader = new FileReader();

      const setResultAsHref = (event) => {
        const aTag2 = document.getElementById('modified');
        aTag2.href = event.target.result;      
      }

      const convertResultAndSetHref = (event) => {
        const originalFileAsText = event.target.result;
        const textReplaced = originalFileAsText.replace(/rn(?=rn)(?=^d $)/g, /n/);
        const output = new File([textReplaced], "", {type: "text/plain"})
        event.target.onload = setResultAsHref
        event.target.readAsDataURL(output);
      }

      reader.onload = convertResultAndSetHref;      
      reader.readAsText(file);
    }
  }