Question

我使用以下代码上传图片。只是想了解是否通过document.querySelector（＆＃39; img＆＃39;）访问元素是一种好的做法。因为我听说你不应该直接访问dom元素。是否有这样做的反应方式。

＆＃13;

previewFile() {
    var preview = document.querySelector('img'); //selects the query named img
    var file = document.querySelector('input[type=file]').files[0]; //sames as here
    var reader = new FileReader();

    reader.onloadend = function () {
      let pic = { "url": "", val: "0" };
      pic.url = reader.result;
      this.picArray.push(pic);
      this.setState({ pics: this.picArray });
}.bind(this);

    if (file) {
      reader.readAsDataURL(file); //reads the data as a URL
    } else {
      preview.src = "";
    }
  }

＆＃13;

Answer 1

您可以将ref设置为该元素

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

然后在您的上传功能中，您可以引用该元素。

var file = this.fileInput;

Answer 2

我认为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} />

Answer 3

我相信你所寻找的是反应http://localhost:99/index.html。

使用refs，您将React元素绑定到class而不使用document.querySelector。

当组件安装时，React将使用DOM元素调用ref回调，并在卸载时调用null。

例如：您将绑定<img>元素，如下所示： <img refs={imgElement => this.imgElement = imgElement}/>

previewImage() {
  var img = this.img // OR just use the this.img bcz it's cached already
}

React - 如何上传图像文件

3 个答案: