Javascript 反应-如何上传图像文件

我用下面的代码上传了一张图片。只想了解通过document.querySelector（'img'）访问元素是否是一种好的做法。因为我听说您不应该直接访问dom元素。有没有办法做到这一点

previewFile（）{
var preview=document.querySelector（'img'）；//选择名为img的查询
var file=document.querySelector（'input[type=file]'）。files[0]；//与此处相同
var reader=new FileReader（）；
reader.onloadend=函数（）{
设pic={“url”：“”，val:“0”}；
pic.url=reader.result；
这个.picArray.push（图）；
this.setState（{pics:this.picArray}）；
}.约束（本）；
如果（文件）{
reader.readAsDataURL（文件）；//将数据作为URL读取
}否则{
preview.src=“”；
}
}

我相信您需要的是反应

使用

refs

可以将React元素绑定到

类

，而不使用document.querySelector

当组件挂载时，React将使用DOM元素调用ref回调，当组件卸载时，React将使用null调用它

例如：您将绑定

元素，如下所示：

this.imgElement=imgElement}/>

previewImage（）{
var img=this.img//或者只使用this.img bcz，因为它已经被缓存了
}

您可以将ref设置为该元素

render() {
    return (.... <input type='file' ref={element => this.fileInput = element)} ...

---

我认为

ref

不是一个好方法（除非没有其他方法）

对于我来说，我将使用onChange事件来获取文件

该文件可以设置为供以后使用的状态（单击“提交”按钮时上载），也可以直接发送到API

handleFileUpload(e) {
  const file = e.target.files[0]; // this is the file you want
  // do the rest here
}

// Component render
<input type="file" onChange={this.handleFileUpload} />

handleFileUpload（e）{
const file=e.target.files[0]；//这是您想要的文件
//其余的在这里做
}
//组件渲染

“我认为ref不是一个好方法（除非没有其他方法）”。你自相矛盾一旦更改为事件，为非事件目的添加事件侦听器是不好的做法如果您仍然决定添加一个事件，那么您应该在回调中处理

文件.target

而不是

事件[0]

+在回调中

文件

是一个丢失类型，它保证绑定到实际元素，而refs if 100%提供您将要处理的元素。@LiorG“为非事件目的添加事件侦听器是一种不好的做法“.这到底是什么意思？这怎么会是个坏习惯？如果元素有一个被触发的事件，那么它显然不是非事件用途。这正是您在React中应该使用的方法，以避免使用ref。这也是

dropZone

库执行此操作的方式。@LiorG很抱歉onChange事件的参数错误。我已经解决了。@LiorG这是reactjs关于refs的说法：

不要过度使用refs您的第一个倾向可能是使用refs在应用程序中“使事情发生”。如果是这种情况，请花一点时间，更批判性地思考在组件层次结构中应该在哪里拥有状态。通常情况下，很明显，“拥有”该状态的适当位置在层次结构的更高级别。

handleFileUpload(e) {
  const file = e.target.files[0]; // this is the file you want
  // do the rest here
}

// Component render
<input type="file" onChange={this.handleFileUpload} />