Javascript ReactJS+；Redux：如何使用Mozilla文件API选择本地图像并将其上传到web？

我想有一个按钮，一旦它被点击，它会打开本地目录，并允许用户选择一个图像。选择后，我希望存储该目录源地址并将其传递到

的src中以显示它

我正试图通过以下方式实现这一目标：

它的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>
    )
  }
}

导出默认类fileUploader扩展组件{
render（）{
返回(
没有选择任何文件

)
}
}

而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);
    }
  }
}

window.URL=window.URL | | window.webkitURL；
var fileSelect=document.getElementById（“fileSelect”），
fileElem=document.getElementById（“fileElem”），
fileList=document.getElementById（“fileList”）；
fileSelect.addEventListener（“单击”，函数（e）{
if（fileElem）{
fileElem.click（）；
}
e、 preventDefault（）；//防止导航到“#”
}，假）；
函数句柄文件（文件）{
如果（！files.length）{
fileList.innerHTML=“未选择任何文件！
”；
}否则{
fileList.innerHTML=“”；
var list=document.createElement（“ul”）；
fileList.appendChild（列表）；
对于（var i=0；i

对于HTML，我得到一个错误：

未终止的JSX内容

。可能是什么问题？我尝试添加/for

，但它仍然抛出一个错误

---

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

的src？

Dodekeract的意思是，在使用React时，您不希望使用直接的DOM操作，例如

document.getElementById

。React与虚拟DOM一起工作，并为您处理实际的DOM交互，这就是它速度如此之快的原因。这里有一些神奇的东西，在某个时候绝对值得更多地学习。通常，您需要以React方式进行操作，使用props和state在渲染函数中写入虚拟DOM

您的组件应该如下所示（未经测试）：

类文件上传程序扩展组件{
构造函数（）{
超级（）；
this.handleChange=this.handleChange.bind（this）；
this.state={file:false}；
}
手变（e）{
this.setState（{file:e.target.value}）；
}
render（）{
const image=（this.state.file）？：null；
返回(
{image}
);
}
}

---

通常给组件一个大写的第一个字母，因此是“FileUploader”。

Dodekeract的意思是，在使用React时，您不想使用直接的DOM操作，例如

document.getElementById

。React与虚拟DOM一起工作，并为您处理实际的DOM交互，这就是它速度如此之快的原因。这里有一些神奇的东西，在某个时候绝对值得更多地学习。通常，您需要以React方式进行操作，使用props和state在渲染函数中写入虚拟DOM

您的组件应该如下所示（未经测试）：

类文件上传程序扩展组件{
构造函数（）{
超级（）；
this.handleChange=this.handleChange.bind（this）；
this.state={file:false}；
}
手变（e）{
this.setState（{file:e.target.value}）；
}
render（）{
const image=（this.state.file）？：null；
返回(
{image}
);
}
}

---

按照惯例，组件的首字母大写，因此称为“FileUploader”。

为什么在使用React时手动创建DOM元素？@Dodekeract您能指导我吗？目前仍在学习如何应对。为什么一开始没有捕捉到错误？可能是问题所在。为什么在使用React时手动创建DOM元素？@Dodekeract您能指导我吗？目前仍在学习如何应对。为什么一开始就没有捕捉到错误？也许这就是问题所在。

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>
        );
    }
}