javascript - 如何从输入文件设置背景图像？

Question

我希望从输入的本地文件中设置背景图片。

但出现'net::ERR_UNKNOWN_URL_SCHEME'错误信息。

我的输入标签:

<input
  accept="image/*"
  className="input_img"
  type="file"
  onChange={e => this.uploadImage(e)}
/>

我的上传图片功能:

uploadImage = e => {
   let node = document.getElementById("result");

   node.style.backgroundImage = "url(" + e.target.result + ")";
};

我该怎么做？

Answer 1

你可以使用 FileReader读取文件的数据，然后用结果设置backgroundImage。

示例

class App extends Component {
  uploadImage = (e) => {
    const { files } = e.target;
    if (files.length === 0) {
      return;
    }

    const file = files[0];
    const fileReader = new FileReader();

    fileReader.onload = () => {
      this.background.style.backgroundImage = `url(${fileReader.result})`;
    };
    fileReader.readAsDataURL(file);
  };

  render() {
    return (
      <div>
        <input
          accept="image/*"
          className="input_img"
          type="file"
          onChange={this.uploadImage}
        />
        <div
          style={{width: 200, height: 200}}
          ref={ref => this.background = ref}
        ></div>
      </div>
    );
  }
}