Javascript 复制文件答案

【问题标题】：Javascript copying fileJavascript 复制文件
【发布时间】：2017-02-17 17:39:48
【问题描述】：

我在 Yeoman 的一个项目中使用了 React，我不得不承认我已经超出了我的能力范围。我正在制作一个网站并将其托管在 localhost:3000 上进行测试。我希望能够上传一个文件，然后该文件将被复制到给定的目录中。

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Instance load Manager</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />
  </head>
  <body>
    <div id="header">
      <input type="file" id="file" name="files[]" multiple onchange="moveFile()" />
    </div>
    <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div id="root"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, browserHistory} from 'react-router';

import {Hello} from './app/hello';
import {Upload} from './app/upload';

import './index.scss';

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={Hello}/>
  </Router>,
  document.getElementById('root')
);

ReactDOM.moveFile(
  <Router history={browserHistory}>
    <Route path="/" component={Upload}/>
  </Router>,
  document.getElementById('root')
);

上传.js

import React, {Component} from 'react';

export class Upload extends Component {
  moveFile() {
    const file = document.getElementById('file').files[0];
    if (file) {
      //  getAsText(file);
      file.copy(`$decodeURI("C:\\Users\\I329968\\Documents\\") / $file.displayName`);
      return (
        <h2>{'Hello world!'}</h2>
      );
    }
  }
}

一切正常，除了 upload.js 似乎根本没有做任何事情。非常感谢您的帮助。

【问题讨论】：

标签： javascript html reactjs yeoman

【解决方案1】：

因为您没有在该文件中定义render 方法，所以每当我们创建任何component 时，我们都需要定义render 方法，这是React 开始创建ui 的地方.试试这个：

import React, {Component} from 'react';

export class Upload extends Component {
  moveFile() {
    const file = document.getElementById('file').files[0];
    if (file) {
      //  getAsText(file);
      file.copy(`$decodeURI("C:\\Users\\I329968\\Documents\\") / $file.displayName`);
      console.log('hello in move file', file);
    }
  }

  render(){
      return(
           <div>
              Hello in upload.js
              <input type="file" id="file" name="files[]" multiple onchange={this.moveFile.bind(this)}/>
           </div>
      );
  }
}

更新：

也进行这些更改：

*从index.html 文件中删除这些行并将其放入upload.js：

<div id="header">
      <input type="file" id="file" name="files[]" multiple onchange="moveFile()" />
</div>

*您忘记在 index.html 中包含 bundle.js 文件

<script src='bundle.js'></script>

*删除这些行：

ReactDOM.moveFile(
  <Router history={browserHistory}>
    <Route path="/" component={Upload}/>
  </Router>,
  document.getElementById('root')
);

*在不同的路由上渲染Upload组件，使用这个：

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={Hello}/>
    <Route path="/upload" component={Upload}/>
  </Router>,
  document.getElementById('root')
);

使用这些组件：

app.js：

import React, {Component} from 'react';
import {Link} from 'react-router';

export default class Upload extends Component {

  render(){
      return(
           <div>
              Hello in app.js
              <br/>
              <Link to='/upload'>Go to upload component</Link>
           </div>
      );
  }
}

上传.js：

import React, {Component} from 'react';

export default class Upload extends Component {
  moveFile() {
    const file = document.getElementById('file').files[0];
    if (file) {
      //  getAsText(file);
     //file.copy(`$decodeURI("C:\\Users\\I329968\\Documents\\") / $file.displayName`);
      console.log('hello in move file', file);
    }
  }

  render(){
      return(
           <div>
              Hello in upload.js
              <input type="file" id="file" name="files[]" multiple onChange={this.moveFile.bind(this)}/>
           </div>
      );
  }
}

index.js：

import React from 'react';
import ReactDOM from 'react-dom';

import {Route, Router, IndexRoute, hashHistory, Link} from 'react-router';

import Upload from './upload';
import App from './app';

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    <Route path="/upload" component={Upload}/>
  </Router>,
  document.getElementById('app')
);

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>View</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>   
    </head>

    <body>

        <div id="app"></div>
        <script src = "bundle.js"></script>
    </body>
</html>

【讨论】：

感谢您的回复！我试过这个，但它不起作用。我什至没有看到添加的
错误：“JSX props must not use bind”
您是否在应用程序组件中使用任何绑定？
不，我不这么认为——我真的不知道它是什么:(
使用我粘贴的代码，它会起作用，因为我测试过:) 只需运行 webpack 并打开 index.html。如果您使用其他名称保存，请更改 bundle.js 文件的名称。