Передача dataURL в href создает файл с текстом «undefined» - PullRequest
Новая
       21

Передача dataURL в href создает файл с текстом «undefined»

0 голосов
/ 19 апреля 2019

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

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

3) использовать RegEx для замены непечатаемых символов

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

Пожалуйста, просмотрите мой подход.

Однако шаг передачи dataURL в атрибут href, похоже, не работает.Мои операторы console.log показывают 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(/\r\n(?=\r\n)(?=^\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

1 Ответ

0 голосов
/ 19 апреля 2019

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

В этом случае ведение журнала консоли вводит в заблуждение. Вот исправленная версия метода 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(/\r\n(?=\r\n)(?=^\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);
    }
  }
...