javascript - ReactJS + Redux : How to use Mozilla File API to select local image and upload it to web?

Question

我想要一个按钮，单击它后，它会打开本地目录并允许用户选择图像。选择后，我想存储该目录源地址并将其传递到 <img src=""/> 的 src 中来显示它。

我正在尝试使用以下方法来实现这一目标: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

它的 HTML 是:

export default class fileUploader extends Component {
  render(){
    return(
      <div>
        <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"/>
        <a href="#" id="fileSelect">Select some files</a>
        <div id="fileList">
          <p>No files selected!</p>
        </div>
      </div>
    )
  }
}

JS 是:

window.URL = window.URL || window.webkitURL;

var fileSelect = document.getElementById("fileSelect"),
    fileElem = document.getElementById("fileElem"),
    fileList = document.getElementById("fileList");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

function handleFiles(files) {
  if (!files.length) {

    fileList.innerHTML = "<p>No files selected!</p>";

  } else {

    fileList.innerHTML = "";
    var list = document.createElement("ul");
    fileList.appendChild(list);

    for (var i = 0; i < files.length; i++) {
      var li = document.createElement("li");
      list.appendChild(li);

      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      img.height = 60;
      img.onload = function() {
        window.URL.revokeObjectURL(this.src);
      }

      console.log(img.height)

      li.appendChild(img);
      var info = document.createElement("span");
      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
      li.appendChild(info);
    }
  }
}

对于<input ...>对于 HTML，我收到错误:Unterminated JSX contents 。可能是什么问题？我尝试添加/为 <input.../>但它仍然会抛出错误。

另外，我应该如何修改 JS，使其能够选择一个图像文件并将该目录源地址传递给 <img/> 的 src ？

Answer 1

Dodekeract 的意思是，在使用 React 时，您不想使用直接的 DOM 操作，例如 document.getElementById。 React 使用虚拟 DOM 并为您处理实际的 DOM 交互，这就是它如此快的原因。其中有一些魔力绝对值得在某个时候更多地了解。您通常需要以 React 方式执行操作，使用 props 和 state 在渲染函数中写入虚拟 DOM。

你的组件应该看起来像这样(未经测试):

class FileUploader extends Component {
    constructor() {
        super();
        this.handleChange = this.handleChange.bind(this);
        this.state = { file: false };
    }

    handleChange(e) {
        this.setState({ file: e.target.value });
    }

    render(){
        const image = (this.state.file) ? <img src={this.state.file} /> : null;

        return(
            <div>
                <input type="file" id="fileElem" multiple accept="image/*"  onChange={this.handleChange} style={{ display: 'none' }} />
                <a href="#" id="fileSelect">
                   <label htmlFor="fileElem">Select some files</label>
                </a>
                <div id="fileList">
                    {image}
                </div>
            </div>
        );
    }
}

按照惯例，组件的第一个字母要大写，因此是“FileUploader”。